百度离线地图添加右键菜单

最新推荐文章于 2025-06-24 09:30:44 发布

xq830210

最新推荐文章于 2025-06-24 09:30:44 发布

阅读量2k

点赞数 3

CC 4.0 BY-SA版权

文章标签：百度离线地图右键菜单

本文链接：https://blog.youkuaiyun.com/xq830210/article/details/78293392

最近在做百度离线地图相关开发，一个右键菜单功能真是折腾的够呛。

将在线api demo代码原样copy到离线版中，无效，调用的是浏览器的右键菜单。

找了一大堆的资料，屏蔽浏览器右键菜单也罢，还有其他方案也罢（其实根本没人提到我这种离线版的情况），均无效。死活不能出现自定义的右键菜单。

也是巧合，把浏览器的右键菜单和百度地图的右键菜单两部分代码合到一起，居然成功了，但会引起覆盖物无法标绘和滚轮响应失效。

后来想到自定义map的鼠标右键响应解决此问题：如下

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/apiv2.0.min.js"></script>
        <script type="text/javascript" src="js/DistanceTool_min.js"></script>
        <script type="text/javascript" src="js/InfoBox_min.js"></script>
		<script type="text/javascript" src="js/pointtransfertools.js"></script>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
		<link rel="stylesheet" type="text/css" href="css/scxnTabDiv.css"/>
        <link rel="stylesheet" type="text/css" href="css/bmap.css"/>
        <title>测试</title>
    </head>
	
	<style type="text/css">
		*{margin:0;padding:0;}
		#menu{position:absolute;width:150px;visibility:hidden;border:1px solid #666;border-bottom-width:0;}
		#menu li{list-style:none;text-indent:1em;}
		#menu li a{display:block;height:30px;line-height:30px;border-bottom:1px solid #666;text-decoration:none;color:#666;font:12px/30px tahoma;}
		#menu li a:hover{background:#eee;color:black;}
	</style>
    
    <body>
        <div id="allmap" style="height:50%;position:relative;border:1px solid gray; z-index:-1" >
			
		</div>
		<div id="menu" style="z-index:2">
			<ul>
				<li><a href="#">contextmenuitem 1</a></li>
				<li><a href="#">contextmenuitem 2</a></li>
				<li><a href="#">contextmenuitem 3</a></li>
				<li><a href="#">contextmenuitem 4</a></li>
				<li><a href="#">contextmenuitem 5</a></li>
				<li><a href="#">contextmenuitem 6</a></li>
			</ul>
		</div>
		<!-- 浮动窗口html代码 end -->
    </body>
</html>

<script type="text/javascript">
    var map = new BMap.Map("allmap", { mapType: BMAP_NORMAL_MAP });      //设置卫星图为底图	
	var pointsetGPS = [];
	
	pointsetGPS[0] = new BMap.Point(121.23045167, 31.3909933); // 新微大厦A座
	
	
	var pointsetBaidu = GpsToBaiduPoints(pointsetGPS);
    map.centerAndZoom(pointsetBaidu[0], 15);                     // 初始化地图,设置中心点坐标和地图级别。

    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });

    map.addControl(navigationControl);

    map.enableScrollWheelZoom();         // 启用滚轮放大缩小。
    map.enableKeyboard();                // 启用键盘操作。  
    map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
	
	/* 原来用这种方式，发现只要调用BMap.ContextMenu()，地图所有覆盖物都无法标绘，滚轮控制地图缩放也失效，原因未知
	var menu1 = new BMap.ContextMenu();
	map.addContextMenu(menu1);
	
	document.oncontextmenu = function(e){
	 if(window.event) e = window.event;
	 var mymenu = document.getElementById("menu");
	 mymenu.style.visibility = "visible";
	 mymenu.style.left = e.clientX + 5 +"px";
	 mymenu.style.top = e.clientY + 5 + "px";
	 return false;
	}
	document.onclick = function(){
	 var mymenu = document.getElementById("menu");
	 mymenu.style.visibility = "hidden"; 
	}
	*/
	
	// 基本思路就是采用自定义的右键响应和左键响应来实现右键菜单功能，经验证可行（不影响覆盖物标绘和鼠标滚轮功能）
	map.addEventListener("rightclick", function (e) { 
        if(window.event) e = window.event;
        var mymenu = document.getElementById("menu");
        mymenu.style.visibility = "visible";
        mymenu.style.left = e.clientX + 5 +"px";
        mymenu.style.top = e.clientY + 5 + "px";
        return false;
    });

    map.addEventListener("click", function (e) {
        var mymenu = document.getElementById("menu");
        mymenu.style.visibility = "hidden";
    });
	
</script>

实测截图：