您的位置：首页 > 其它

如何使用百度地图API在地图上批量添加点标注

2017-08-04 20:49 225 查看

<style>
html,body,#map{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
</style>
<body>
<div id="map"></div>
</body>
<script src="http://api.map.baidu.com/api?v=2.0&ak="你的应用API密钥""></script>
<script>
(function() {
var map = new BMap.Map("map")
//先右击开启可以收集的功能，然后双击地图添加经纬度到数组，添加到10个关闭收集功能
function takePoints(done) {
var points = [];
var isActionDblclick = false; //是否触发过双击
function lister() {
//如果双击过就不再添加双击事件
if (isActionDblclick) {
return;
}
isActionDblclick = true //标识为双击过的
function takeStart(event) {
console.log(event)
points.push(event.point) //添加经纬度到数组
if (points.length >= 10) { //添加10个关闭收集功能
done(points);//将收集好的经纬度给调用的位置
isActionDblclick = false;
map.removeEventListener("dblclick", takeStart) //关闭收集功能
points = [];//将本次收集的经纬度在数组置为空
};
};
map.addEventListener("dblclick", takeStart) //添加双击事件
};
map.addEventListener("rightclick", lister); //添加右击时间
};
function addMarkerToMap(point) {//添加覆盖物的方法
//console.log(point)
var marker=new BMap.Marker(point);
map.addOverlay(marker);//添加点标注到地图
marker.addEventListener("click",function(){//添加信息窗口
new BMap.Geocoder().getLocation(point,function(result){
console.log(result.address);
var infowinder=new BMap.InfoWindow(result.address);
marker.openInfoWindow(infowinder);
});
});
};
function init() {
map.centerAndZoom("西安");
map.disableDoubleClickZoom();//禁用双击放大的功能
takePoints(function(result) {
result.forEach(function(point) {
addMarkerToMap(point);
})
});
};
init();  })(); </script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： api 批量添加添加标注百度地图api

相关文章推荐

新的分享

章节导航