【百度地圖事件監聽】

時間 2019-11-20

標籤百度地圖事件監聽简体版

原文原文鏈接

在運用百度地圖API時，須要監聽地圖的點擊事件。發現一個問題。javascript

百度地圖關於事件的描述：css

地圖事件概述

瀏覽器中的JavaScript是「事件驅動的」，這表示JavaScript經過生成事件來響應交互，並指望程序可以「監聽」感興趣的活動。例如，在瀏覽器中，用戶的鼠標和鍵盤交互能夠建立在DOM內傳播的事件。對某些事件感興趣的程序會爲這些事件註冊JavaScript事件監聽器，並在接收這些事件時執行代碼。html

百度地圖API擁有一個本身的事件模型，程序員可監聽地圖API對象的自定義事件，使用方法和DOM事件相似。但請注意，地圖API事件是獨立的，與標準DOM事件不一樣。java

事件監聽

百度地圖API中的大部分對象都含有addEventListener方法，您能夠經過該方法來監聽對象事件。例如，BMap.Map包含click、dblclick等事件。在特定環境下這些事件會被觸發，同時監聽函數會獲得相應的事件參數e，好比當用戶點擊地圖時，e參數會包含鼠標所對應的地理位置point。jquery

有關地圖API對象的事件，請參考完整的API參考文檔。程序員

addEventListener方法有兩個參數：監聽的事件名稱和事件觸發時調用的函數。在下面示例中，每當用戶點擊地圖時，會彈出一個警告框。api

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("click", function(){
alert("您點擊了地圖。");
});

經過監聽事件還能夠捕獲事件觸發後的狀態。下面示例顯示用戶拖動地圖後地圖中心的經緯度信息。瀏覽器

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("dragend", function(){
var center =map.getCenter();
alert("地圖中心點變動爲："+ center.lng +", "+ center.lat);
});

事件參數和this

在標準的DOM事件模型中（DOM Level 2 Events），監聽函數會獲得一個事件對象e，在e中能夠獲取有關該事件的信息。同時在監聽函數中this會指向觸發該事件的DOM元素。百度地圖API的事件模型與此相似，在事件監聽函數中傳遞事件對象e，每一個e參數至少包含事件類型（type）和觸發該事件的對象（target）。 API還保證函數內的this指向觸發（同時也是綁定）事件的API對象。函數

例如，經過參數e獲得點擊的經緯度座標。ui

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("click", function(e){
alert(e.point.lng +", "+ e.point.lat);
});

或者經過this獲得地圖縮放後的級別。

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("zoomend", function(){
alert("地圖縮放至："+this.getZoom()+"級");
});

移除監聽事件

當您再也不但願監聽事件時，能夠將事件監聽進行移除。每一個API對象提供了removeEventListener用來移除事件監聽函數。

下面示例中，用戶第一次點擊地圖會觸發事件監聽函數，在函數內部對事件監聽進行了移除，所以後續的點擊操做則不會觸發監聽函數。

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
function showInfo(e){
alert(e.point.lng +", "+ e.point.lat);
map.removeEventListener("click", showInfo);
}
map.addEventListener("click", showInfo);

可是我發現當觸發addEventListener兩次時， removeEventListener就無效了。:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body {height:100%;}
#allmap {width:100%;height:50%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=1ixirBnjW51i4NoOdEKGP3Xk" type="text/javascript"></script>
<title>給覆蓋物添加右鍵菜單</title>
</head>
<body>
<div id="allmap"></div>
<input type="button" value="點擊繪製圓"class="add">
<input type="button" value="取消繪製圓"class="remove">
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map =newBMap.Map("allmap");
var point =newBMap.Point(116.404,39.915);
map.centerAndZoom(point,15);
radiusNum =500;
function showInfo(e){
//alert(e.point.lng + ", " + e.point.lat);
console.log('showInfo');
map.clearOverlays();
circlePoint =newBMap.Point(e.point.lng, e.point.lat);// 建立點座標
var circle =newBMap.Circle(circlePoint, radiusNum,{
strokeColor:"blue",
strokeWeight:2,
strokeOpacity:0.5
});//建立圓
map.addOverlay(circle);//增長圓
}
function addClick(){
console.log("addClick");
map.addEventListener("click",showInfo);
}
function removeClick(){
console.log("removeClick");
map.removeEventListener("click",showInfo);
}
$(".add").on('click',addClick);
$(".remove").on('click',removeClick);
</script>