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

Question

我想通过右键单击在形状(圆形、矩形、多边形)上显示一个菜单，然后选择并在其上执行一个功能(更改颜色，...)。
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) 来绘制您的上下文菜单。这样它就可以被重用，并且代码会得到更好的组织。