百度離線地圖新增右鍵選單
阿新 • • 發佈：2019-01-07
最近在做百度離線地圖相關開發，一個右鍵選單功能真是折騰的夠嗆。
將線上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>
實測截圖：
