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

Question

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

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 );

你能帮忙吗？

- Bertaud

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AlfaTeK · Accepted Answer

您没有具体说明要在哪些元素上添加上下文菜单，因此我只添加了一个新的圆圈并进行了一些“快速而简单”的示例：

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）来绘制上下文菜单。这样可以重复使用它，并且代码会更加有组织。请注意保留HTML标签。