3

図形（円、長方形、多角形）を右クリックしてメニューを表示し、その上で機能（色の変更など）を選択して実行したいと考えています。
1) 形状にイベントを定義することから始めます。 

google.maps.event.addListener(myShape, 'rightclick', function(event) {...}

2) 次に、div を定義してメニューを作成します。

myMenu = document.createElement("div");
myMenu.className  = 'contextmenu';
myMenu.innerHTML = "<a id='menu1'>item 1<\/a><a id='menu2'>item 2<\/a>";

3) この div を形状に関連付ける必要がある後:続行する方法がわかりません 4) 最後に、event.LatLng の位置にメニューを表示する必要があります: 続行する方法がわかり
ませ ん。おそらく次のようなものです:

$('.contextmenu').css('left',x  );
$('.contextmenu').css('top',y );

手伝ってくれる ？

4

1 に答える 1

2

コンテキスト メニューにどの要素を追加したいのか具体的ではなかったので、新しい円を追加して、少し「手早く汚い」例を実行しました: http://jsfiddle.net/8Apwr/1/

トリックはここにあります：

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

google.maps.event.addListener(cityCircle, 'rightclick', function(event) {
   var pos = overlay.getProjection().fromLatLngToDivPixel(event.latLng);
   $('#menu').show();
   $('#menu').css("left", pos.x);
   $('#menu').css("top", pos.y);
});

最良の結果を得るには、新しいカスタム オーバーレイ ( https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays ) を作成してコンテキスト メニューを描画することを検討する必要があります。そうすれば再利用でき、コードはよりよく整理されます。

于 2013-06-12T17:38:42.960 に答える