<div> <ul> <li><a href="#">设置中心</a></li> <li><a href="#">添加地标</a></li> <li><a href="#">距离丈量</a></li> </ul> </div>
使用这个 html 元素初始化一个 overlay，并将 overlay 添加到地图中：
var menu_overlay = new ol.Overlay({ element: document.getElementById("contextmenu_container"), positioning: 'center-center' }); menu_overlay.setMap(map);
接下来，我们就可以在鼠标右键菜单的事件回调函数中，根据获取的地图坐标位置，设置 overlay 的显示位置：
menu_overlay.setPosition(coordinate);
菜单隐藏
当我们鼠标点击右键，菜单出现，但是我们不能让菜单总是显示在地图中，这时我们可以添加鼠标左键单击，菜单消失功能，或者当选择某项功能时，菜单消失。这个比较容易实现，只要一句便可以实现，放在鼠标左键事件的回调函数或者菜单功能执行函数中就行，如下：
menu_overlay.setPosition(undefined);
总结
这篇文章中，主要讲了 openlayers 初始化页面地图元素的过程，并介绍了在地图上实现“鼠标右键菜单功能”，和隐藏菜单的实现。我们并没有对菜单中的条目绑定事件，因为我们的重点在于实现右键菜单，对于菜单的条目要绑定什么功能，和普通的 javascript 事件绑定并无二致，所以没有展开。
您可能感兴趣的文章: