1

Googleマップに現在のユーザーの場所を表示する次の例があります：http：//dev.driz.co.uk/googlemap/

ご覧のとおり、私には3つのピースがあります（デモ用にFoursquareアイコンを借りました）。

1.）ユーザーがいるマーカー

2.）ユーザーのアバター（ユーザーがログインしているかどうかに応じて変更される可能性があり、カスタムアバターを持っているか、謎の男を持っているだけであることに注意してください）

3.）アバターとマーカーの両方の上にあるアバターフレーム。

私がやりたいのは、アバターがフレーム内にうまく収まるようにすることです。可能であれば、代わりに背景画像として使用することもできますか？これに関するドキュメントには何も表示されていませんが、フレームはアバターの上にある必要があるため、丸みを帯びたコーナーマスクが作成されます。

また、フレームがマーカードットの下に表示され、常に上に表示されるとは限らないため、それらをすべて一緒に落下させたいと思います。したがって、それらは1つのピースとして機能し、同時にドロップする必要があります。

グーグルマップの知識を持っている人は、これらの2つの部分で私を助けることができますか？ありがとう

4

1 に答える 1

1

現状のアニメーション全体について注目に値することがいくつかあります。

  • マーカーのz-indexは、マーカーが最終位置に来るまで設定されないため、アニメーション中に一貫性がありません。したがって、ドロップ中にそれを制御するために実際にできることは、各マーカーのsetMap機能への呼び出しを可能な限り順序付けることだけです。ドロップしながら順番にスタックするようにそれらを誘導します。つまり、最初に一番後ろのオブジェクトの関数を呼び出し、スタック順に画像を近づけます。ただし、アニメーションが完了すると、それらは常に正しい順序になります。
  • 呼び出しの順序を制御するには、オブジェクトsetMapを格納する変数に一意の名前を付ける必要がありMarkerます。
  • マーカーはマップに追加されず、読み込まれるまでアニメーション化されないため、コードで画像オブジェクトを作成して画像をプリロードし、マーカーアニメーションをonloadすべて終了したら、イベントからのコールバックとして設定することをお勧めします。 。

これらすべてが整っていても、画像は個別にドロップされるため、探している効果が正確に得られない可能性がありますが、これはおそらく、管理できる限り画像を近づける方法です。

Zインデックスの設定

まず、マーカーのz-indexは、コンストラクターMarkerOptionsに渡すものの1つとして簡単に設定できます。Marker

var marker1 = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: pos,
    map: map,
    icon: image1,
    zIndex: 1
});

アイコンアンカーの設定

次に、マーカーに提供する画像の位置を変更するには、オブジェクトにメンバーとしてMarkerOptions含めることができるため、このオブジェクトを使用してアイコンのアンカーを示します。MarkerImageicon

var image1 = new google.maps.MarkerImage(
    "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png",
    null,
    null,
    new google.maps.Point(16, 49));

2番目と3番目のパラメーターはオプションであり、指定されていない場合は自動的に作成されるため、実際にはアンカーパラメーターの値を提供することにのみ関心があります。

画像のOnLoadコールバックの作成

画像をプリロードする場合は、これを強くお勧めします。3つの画像オブジェクトを作成し、OnLoadハンドラーを各オブジェクトにバインドしてから、画像のsrcプロパティを<strong>この順序で設定します。マーカーを作成してマップに追加するコードは、3つの画像すべてが読み込まれた後にのみ実行する必要があります。

// Create image objects to force pre-loading
var domImg1 = new Image(),
    domImg2 = new Image(),
    domImg3 = new Image();

// Instantiate variables for iteration
var images = [domImg1, domImg2, domImg3],
    j = 0;

// Bind an OnLoad handler that checks to see if all three images have been pre-loaded
for (i in images) {
    images[i].onload = function() {
       if (++j == 3) {
           // Create markers and add to map here
       }
     }
}

// Set the src property to start the download and trigger the onload events
domImg1.src = "http://dl.dropbox.com/u/1597153/00000000000000000000000000000000.png";
domImg2.src = "http://dl.dropbox.com/u/1597153/pin-white.png";
domImg3.src = "http://dl.dropbox.com/u/1597153/marker.png";

このフィドルでここで示したテクニックの実用的なデモを提供したので、それをチェックしてください。うまくいけば、それがどのように組み合わされるかについてのアイデアが得られます。

于 2012-07-24T14:46:32.003 に答える