思路：
1 先右鍵開啓可以收集的功能
2 雙擊地圖 添加經緯度到數組
3 添加到10個 關閉收集的功能
4 地址收集完成後再地圖上顯示這是個地標（圖標）
5 創建一個信息窗口的對象
6 單擊圖標顯示位置信息
步驟
1在html中先設置格式和引入百度地圖API文件、js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入百度API文件-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AprPCc8Vizizbwc8qKmxk8D13Yl9cTKs"></script>
<!--設置樣式.div的大小要與可視頁面一樣大 這樣就可以把地圖顯示在全部頁面上面了-->
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#map{width: 100%;height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
</body>
<!--引入js文件 注意百度API文件要在js文件前面-->
<script type="text/javascript" src="js/new_file.js"></script>
</html>2新建js文件
代碼思路解析：
首先給一個(function(){})()自調用函數 ，函數會自行調用。自調用函數函數內部氛圍三塊：1是引入地圖並初始化，讓地圖顯示在也頁面上面。2是根據要實現的效果給出方法，利用addEventListener（）先給定一個右擊事件給頂一個方法listenr；listenr方法就是一個雙擊事件，這個雙擊事件的方法是或獲取雙擊時的經緯度，把獲取到的信息存放在在一個數組裏面，當雙擊滿十次後雙擊事件停止，然後再控制檯顯示地址信息，在地圖上一圖標的形式顯示雙擊過的十個地址。3創建一個可視窗口對象addMarkerToMap（），當點擊地址圖標的時候，可是窗口出現，並顯示地址座標的文字地址信息。
(function () {
var map = new BMap.Map("map");
function takePoints(done) {
// Promise裏面的 執行或者拒絕的方法（Promise(function (done，reject) {}） 只能執行一次 (有可能 把Promise裏面傳入的參數 移除)
// 什麼時候 不能使用Promise？
//需要多次執行某個回調的時候 不能使用Promise 因爲只能執行一次 -> 就可以使用callback
var points = []; //經緯度數組
var isActionDblclick = false; //是否觸發過雙擊
function listenr() {
if (isActionDblclick){ // 如果雙擊過 就不再 添加 雙擊事件
return;
}
// 雙擊地圖 添加經緯度到數組
// 添加到10個
// 添加到10個 關閉收集的功能
isActionDblclick = true; //標識爲雙擊過的
function takeStart(event) { //具體收集座標點的方法
console.log(event);
points.push(event.point); // 添加經緯度到數組
if (points.length>=10){ // 添加到10個 關閉收集的功能
console.log(points);
done(points); //把收集好的座標點 給調用的位置
isActionDblclick = false; // 關閉收集的功能
map.removeEventListener("dblclick",takeStart);
points = [];
}
}
map.addEventListener("dblclick",takeStart);
}
map.addEventListener("rightclick",listenr); //首先是一個右擊事件
}
function addMarkerToMap(point) { //創建一個信息窗口的對象
var marker = new BMap.Marker(point); //聲明一個圖標
map.addOverlay(marker); //把圖標放到地圖上面
marker.addEventListener("click",function () { //給圖標設定一個監聽事件 單擊擊觸發
new BMap.Geocoder().getLocation(point,function (result) { //獲取用戶的地址解析。 Geocoder().getLocation()把經緯度轉換爲文字信息
console.log(result.address);
var infoWindow = new BMap.InfoWindow(result.address); //聲明一個變量等於地址信息
marker.openInfoWindow(infoWindow); // 在點擊圖標的時候
});
});
}
function init() {
map.centerAndZoom("北京");
map.disableDoubleClickZoom();
takePoints(function (result) {
result.forEach(function (point) { // result -> 他是傳過來的points數組-> 盛放的是座標
addMarkerToMap(point);
})
});
}
init();
})();注意：
1、數組points要放在函數外面
2、利用變量isActionDblclick值true和false 和if判斷來停止雙擊事件