Question

我想通过右键单击在形状（cercle，rectangle，polygon）上显示一个菜单，然后选择并执行一个函数（更改颜色，......）。
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 );

你可以帮忙吗？

Answer 1

您没有具体说明要添加上下文菜单的元素，所以我只添加了一个新的圆圈并做了一些“快速而肮脏”的示例： 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）来绘制上下文菜单。这样它就可以重用，代码组织得更好。

如何在形状上显示上下文菜单？

1 个答案: