2011-10-20 15 views
39

MarkerImageを使用してアイコンを設定してGoogleマップマーカーの色を設定する方法については、this explanationを使用しています。しかし、scaledSize引数でマーカーのサイズを変更することはできません。Googleマップのマーカーサイズを変更するV3

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倍にするにはどうすればよいですか?

答えて

76

この答えはJohn Black's helpful answerに解説したので、私は私の答えに彼の答えの内容の一部を繰り返すことになります:あなたのケースでは、あなたが行うことができます。

さておき、同様の質問へthis answerを定義することを主張したようなマーカーのサイズを変更する最も簡単な方法は、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、3、および4はnullを離れるとサイズを拡大縮小しているようです第2引数のマーカーサイズは、第5引数のスケーリングよりも優れています。これが本当かどうかわかりません。

what happens when you leave anchor null on an enlarged shadow:引数2-4 nullはデフォルトのGoogleのピン画像のための素晴らしい作品が、あなたは、デフォルトのGoogleのピン影画像に対して明示的にアンカーを設定しなければならない、またはそれは次のようになりますを残し

ピン画像の下部中央は、マップ上のグラフィックを表示すると、ピンの先端と一緒に配置されます。マーカーの位置プロパティ(マップ上のマーカーの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

+4

はgoogle.maps.Size' 'にアスペクト比を維持する、またはその代わりに実際のピクセルのパーセンテージを指定する方法はありますか?ありがとう! –

+0

デフォルトマーカーアイコンのスケールを変更する方法はありますか?つまり、マーカーに 'setIcon'を使わなくても、マーカーのスケーリングを変更することはできますか? – ironchicken

21

引数のサイズはピクセル単位です。だから、あなたの例のマーカーのサイズを倍増するMarkerImageコンストラクタへの5番目の引数は次のようになります。私は下/中央以外の何かを必要としない限り、それは最も簡単な、他の引数からのマップAPIの数字をできるように見つける

new google.maps.Size(42,68) 

アンカーとしての画像の

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) 
); 
関連する問題