1

Google マップのカスタム マーカー アイコンを使用します。私の問題は、私が用意したシンプルで透明な png の下部に余分な 23 ピクセルの空きスペースがあることです。これは、いくつかの Photoshop グロー効果のために行われますが、マーカーの実際のポイントは下部から 23 ピクセルで始まります。

マーカーが正しい場所に着地するように、これをどのように考慮するのですか? margin-bottom:-23px; のようなものが必要です。しかし、JavaScriptで。

難しい方法は、緯度経度で 23px を計算し、マーカーの位置を調整することです。しかし、それはめちゃくちゃ醜いでしょう...

何か案は？

これまでのところ、私はこれを持っています：

var marker_icon = new google.maps.MarkerImage('<?php echo get_bloginfo("template_url"); ?>/images/marker.png', new google.maps.Point(10,10));
                                var marker = new google.maps.Marker({
                                  position: latlngPos,
                                  map: map,
                                  icon: marker_icon
                                });

しかし、icon: を変数に変更したため、マーカーが表示されなくなりました。コンソールは何も教えてくれません。

画像はこれです：

ここに画像の説明を入力

4

2 に答える 2

2

カスタム アイコンを定義する方法に関するドキュメントを参照してください。

アンカー | ポイント | 地図上のマーカーの位置に対応する画像を固定する位置。デフォルトでは、アンカーは画像の下部の中心点に沿って配置されます。

URL | 文字列 | 画像またはスプライト シートの URL。google.maps.MarkerShape オブジェクトの仕様

画像の左上隅 (0, 0) から計算されます。しかし、あなたはサイズを提供していません。

開発者ガイド (例付き)

あなたの画像は 59px × 72px なので、アンカーは 72-23 になるはずです: new google.maps.Point(30,49);

var marker_icon = {
   url: <your url>,
   size: new google.maps.Size(59,72),
   origin: new google.maps.Point(0,0),
   anchor: new google.maps.Point(30,49)
};
于 2013-03-20T14:19:05.680 に答える
0

解決策は、次のようにすることでした。

var marker_icon = {
                                      url: '<?php echo get_bloginfo("template_url"); ?>/images/marker.png',
                                      size: new google.maps.Size(59,72),
                                      origin: new google.maps.Point(0,0),
                                      anchor: new google.maps.Point(29,58)
                                    };

方向性についてはgeocodezipに感謝します。

于 2013-03-20T14:59:58.353 に答える