思路:
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判断来停止双击事件