web-dev-qa-db-ja.com

GoogleマップV3でマーカーサイズを変更する

この説明 を使用しています。Googleマップマーカーの色を MarkerImage を使用してアイコンを設定する方法で、色付けはうまく機能します。しかし、scaledSize引数でマーカーのサイズを変更することはできません。

    var pinColor = 'FFFF00';
    var pinIcon = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34),
        new google.maps.Size(2, 4));
    marker.setIcon(pinIcon);

マーカーサイズを変更するためのscaledSize引数の正しい使用方法は何ですか？たとえば、マーカーサイズを2倍にするにはどうすればよいですか？

google-maps-api-3google-maps-markers
41
steampowered

この答えは John Blackの役に立つ答え に説明されているので、私の答えで彼の答えの内容のいくつかを繰り返します。

マーカーのサイズを変更する最も簡単な方法は、引数2、3、および4をヌルのままにして、引数5でサイズをスケーリングすることです。

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00",
    null, /* size is determined at runtime */
    null, /* Origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);

余談ですが、同様の質問に対する この回答 は、2番目の引数でマーカーサイズを定義する方が5番目の引数でスケーリングするよりも優れていると断言します。これが本当かどうかはわかりません。

引数2〜4のnullを残すことは、デフォルトのGoogleピン画像に対してはうまく機能しますが、デフォルトのGoogleピンシャドウ画像に対して明示的にアンカーを設定する必要があります。そうしないと、次のようになります。

what happens when you leave anchor null on an enlarged shadow

地図上でグラフィックを表示すると、ピン画像の中央下部がピンの先端と同じ場所に配置されます。これは重要です。マーカーの位置プロパティ（マーカーの LatLng 地図上の位置）は、アンカー（4番目の引数）nullを離れると、ピンの視覚的な先端と自動的に連結されます。 。言い換えると、アンカーをnullのままにしておくと、チップがポイントするはずの場所を確実にポイントします。

ただし、影の先端は中央下にはありません。そのため、ピンの影の先端がピン画像の先端と同じ場所に配置されるように、4番目の引数を明示的に設定してピンの影の先端をオフセットする必要があります。

実験により、シャドウの先端は次のように設定する必要があることがわかりました。xはサイズの1/3、yはサイズの100％です。

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    null,
    null,
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110));

これを与えるには：

offset the enlarged shadow anchor explicitly

79
steampowered

サイズの引数はピクセル単位です。したがって、例のマーカーサイズを2倍にするには、MarkerImageコンストラクターの5番目の引数は次のようになります。

new google.maps.Size(42,68)

アンカーとして画像の下/中央以外のものを必要としない限り、map APIに他の引数を理解させるのが最も簡単だと思います。あなたの場合は次のことができます：

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    null, /* size is determined at runtime */
    null, /* Origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);
24
John Black