谷歌地图Gmap3 右击菜单

花道峰

于 2018-06-08 10:11:07 发布

阅读量914

点赞数

分类专栏： gmap 文章标签：谷歌地图 Gmap3 右键菜单

本文链接：https://blog.csdn.net/kai666ling/article/details/80618841

版权

gmap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度地图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 οnlοad="initialize()">
<div id="map_canvas"></div>
</body>
<script>
</script>

</html>

花道峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谷歌地图Gmap3 右击菜单

百度地图API直接有右键菜单接口，但是谷歌貌似没有（反正我没有找到），代码如下，直接把代码复制到HBuilder，就可以看到效果&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; &lt;me
复制链接

扫一扫

专栏目录