百度地圖JavaScriptAPI事件使用小貼士


總結了三個百度地圖JSAPI事件的常見問題,供各位JSAPI用戶參考。
Q: 同時給地圖和覆蓋物(如Marker)注冊事件(如Click事件),如何只觸發覆蓋物的事件?

A:以同時給地圖和Marker注冊單擊事件為例,不做任何處理時,核心代碼如下:


[html]  view plain copy
  1. <span style="font-size:12px;"><span style="color:#009900;">marker.addEventListener("click", showInfo);//給marker注冊單擊事件  
  2. map.addEventListener("click", showMapInfo);//給地圖注冊單擊事件  
  3. function showInfo(e){  
  4.   
  5.  alert("你單擊的是Marker吆~:"+e.point.lng + ", " + e.point.lat);  
  6. }  
  7. function showMapInfo(e){  
  8.   
  9.  alert("你單擊的是Map吆~:"+e.point.lng + ", " + e.point.lat);</span>  
  10. }</span>  
以上代碼,運行后單擊Marker,會先后彈出兩次alert,分別提示單擊了Marker和Map;單擊地圖時,只會alert單擊地圖

此時如果想單擊Marker的時候,alert單擊了Marker;單擊地圖時,alert單擊了地圖,則只要處理下ShowMapInfo即可。即:

[html]  view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:12px;">function showMapInfo(e){  
  2. if(e.overlay!=null) //判斷覆蓋物是否存在  
  3. {  
  4. return;  
  5. }  
  6.  alert("你單擊的是Map吆~:"+e.point.lng + ", " + e.point.lat);  
  7. }</span>  
關於e的詳情請參考百度地圖API官網
Q:如何注銷掉百度地圖匿名事件?

A: 一般來說,我們使用removeEventListener(event:String, handler:Function)方法注銷掉之前注冊的事件,但是該方法需要注冊的時候指定handler函數名。對於注冊的時候handler為匿名函數的情況,我們采用如下方法:

[html]  view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:12px;">var markerShowInfo;//定義變量  
  2. marker.addEventListener('click',markerShowInfo=function(e) //將匿名函數賦值給變量  
  3. {  
  4. alert(e.target.getPosition().lng);  
  5. });  
  6. marker.removeEventListener('click',markerShowInfo); //ok了吧?哈哈~</span>  

Q:如何通過事件返回參數e確定事件源的類型?

A:  當我們給多種覆蓋物注冊了同一事件,卻又希望對不同類的覆蓋物執行不同的操作時,就需要判斷事件源類型。以下提供兩種判斷覆蓋物類型的方式,即:

e.target.toString() == '[object Polygon]'  //判斷事件源是否是多邊形
e.target instanceof BMap.Polygon
[html]  view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:12px;"><span style="color:#009900;">polygon.addEventListener("click", showOverlayInfo);  
  2.  marker.addEventListener("click", showOverlayInfo);//作為參考  
  3. function showOverlayInfo(e){  
  4.  if (e.target.toString() == '[object Polygon]')  
  5.  {  
  6.       alert("你單擊的是多邊形");  
  7.  }  
  8.  else if(e.target instanceof BMap.Marker)  
  9.  {  
  10.  alert("你單擊的是Marker點喔~");  
  11.  }  
  12.   
  13. }</span></span>  
三個示例的完整代碼如下:


[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <style type="text/css">  
  5. body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  
  6. #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}  
  7. #r-result{height:100%;width:20%;float:left;}  
  8. </style>  
  9. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  
  10. <title>點擊獲取當前經緯度</title>  
  11. </head>  
  12. <body>  
  13. <div id="allmap"></div>  
  14. </body>  
  15. </html>  
  16. <script type="text/javascript">  
  17. var map = new BMap.Map("allmap");  
  18. map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  
  19. var marker=new BMap.Marker(new BMap.Point(116.404, 39.915));  
  20. map.addOverlay(marker);  
  21.   
  22. /* 第一個問題 開始*/  
  23. marker.addEventListener("click", showInfo);  
  24. map.addEventListener("click", showMapInfo);  
  25. function showInfo(e){  
  26.   
  27.  alert("你單擊的是Marker吆~:"+e.point.lng + ", " + e.point.lat);  
  28. }  
  29. function showMapInfo(e){  
  30. if(e.overlay!=null)  
  31. {  
  32. return;  
  33. }  
  34.  alert("你單擊的是Map吆~:"+e.point.lng + ", " + e.point.lat);  
  35.   
  36. }  
  37. /* 第一個問題 結束*/  
  38. /* 第二個問題 開始*/  
  39. var markerShowInfo;  
  40. marker.addEventListener('click',markerShowInfo=function(e)  
  41. {  
  42. alert(e.target.getPosition().lng);  
  43. });  
  44. marker.removeEventListener('click',markerShowInfo);  
  45. /* 第二個問題 結束*/  
  46. /* 第三個問題 開始*/  
  47. var polygon=new BMap.Polygon([  
  48.   new BMap.Point(116.256515,39.995242),  
  49.   new BMap.Point(116.502579,39.951893),  
  50.   new BMap.Point(116.534775,39.998338)]);  
  51.   map.addOverlay(polygon);  
  52.  polygon.addEventListener("click", showOverlayInfo);  
  53.  marker.addEventListener("click", showOverlayInfo);//作為參考  
  54. function showOverlayInfo(e){  
  55.  if (e.target.toString() == '[object Polygon]')  
  56.  {  
  57.       alert("你單擊的是多邊形");  
  58.  }  
  59.  else if(e.target instanceof BMap.Marker)  
  60.  {  
  61.  alert("你單擊的是Marker點喔~");  
  62.  }  
  63.   
  64. }  
  65.   
  66. /* 第三個問題 結束*/  
  67. </script>  

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com