【百度地圖API】如何判斷點擊的是地圖還是覆蓋物?


摘要:很多API愛好者問我,為什么我點擊的是marker,而map也會響應該事件呢?怎樣才能判斷,我點擊的是標注,還是地圖呢?下面一起來看看。

 

------------------------------------------------------------

先看看地圖有哪些事件,查看官網類參考,翻到事件

 

大家看到這里的參數了麽?

其實,在點擊物體時,通過這些參數就能夠判斷所點擊的物體是什么了。

 

用marker舉例:

先創建一個marker

//覆蓋物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

 

 

然后對地圖添加點擊事件,如果判斷出來是覆蓋物,就彈出相應的對話框。

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert('你點擊的是覆蓋物:'+e.overlay.toString());   
        }else{
            alert('你點擊的是地圖');
        }
    });

 

 

 

 

添加一堆覆蓋物,然后給每個覆蓋物寫點擊事件。

 

 

比如我點擊了多邊形,就會彈出這個。

 

 

 

全部源代碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>點擊事件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=v=1.3"></script>
</head>

<body>
  <!--百度地圖容器-->
  <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    var map = new BMap.Map("dituContent");
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    map.enableScrollWheelZoom();

    map.addEventListener("click",function(e){
        if(e.overlay){
            alert('你點擊的是覆蓋物:'+e.overlay.toString());   
        }else{
            alert('你點擊的是地圖');
        }
    });

    //覆蓋物Marker
    var pmk = new BMap.Point(116.249472,39.946583);
    var mk = new BMap.Marker(pmk);
    map.addOverlay(mk);

    //覆蓋物Label
    var plb = new BMap.Point(116.408149,39.958087);
    var lb = new BMap.Label('我是覆蓋物Label',{point:plb});
    map.addOverlay(lb);

    //覆蓋物Polyline
    var pl = new BMap.Polyline([new BMap.Point(116.250047,39.919583),new BMap.Point(116.441494,39.919583)],{strokeWeight:10})
    map.addOverlay(pl);

    //覆蓋物Polygon
    var pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
    map.addOverlay(pg);

</script>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM