谷歌地图Gmap3 右击菜单
百度地图API直接有右键菜单接口,但是谷歌貌似没有(反正我没有找到),
代码如下,直接把代码复制到HBuilder,就可以看到效果
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Google 地图 右键使用</title>
<style>
html,body{height:100%;margin:0;padding:0;}
.left{width:20%;float:left;height:100%;overflow-y:scroll;overflow-x:hidden;}
#map_canvas{height:100%;width:100%;float:left;}
@media print{
html,body{height:auto;}
#map_canvas{height:600px;}
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
var map;
function initialize(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
//初始化右键菜单,在初始化地图中一并初始化了。
var ContextMenuControlDiv = document.createElement('DIV');
var ContextMenuControl = new createContextMenu(ContextMenuControlDiv, map);
ContextMenuControlDiv.index = 1;
/*增加层的方式*/
map.controls[google.maps.ControlPosition.TOP_LEFT].push(ContextMenuControlDiv);
}
/*创建右键菜单*/
function createContextMenu(controlUI,map) {
contextmenu = document.createElement("div");
contextmenu.style.display = "none";
contextmenu.style.background = "#ffffff";
contextmenu.style.border = "1px solid #8888FF";
contextmenu.innerHTML =
" <a href='javascript:'><div class='context'>导航到这里</div></a>"
+ "<a href='javascript:'><div class='context'>取消导航</div></a>";
controlUI.appendChild(contextmenu);
/*给整个地图增加右键事件监听*/
google.maps.event.addListener(map, "rightclick", function(event){
contextmenu.style.position="relative";
contextmenu.style.left=(event.pixel.x-80)+"px"; //平移显示以对应右键点击坐标
contextmenu.style.top=event.pixel.y+"px";
contextmenu.style.display = "block";
});
google.maps.event.addDomListener(controlUI, 'click', function () {
contextmenu.style.display = "none";
});
google.maps.event.addListener(map, "click", function(){
contextmenu.style.display = "none";
});
google.maps.event.addListener(map, "drag", function(){
contextmenu.style.display = "none";
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
<script>
</script>
</html>