如果添加大量聚合点的时候,请参考如下几篇文章
https://www.zhihu.com/question/24023333
https://blog.csdn.net/ztop_f/article/details/55256003
百度地图API 在使用点聚合时,如果放大、缩小或移动地图时,添加的文字标签会消失
https://www.jianshu.com/p/263cc04516edMakrer
添加marker
let point = new BMap.Point(115.430127, 40.960126); let myIcon = new BMap.Icon("../static/images/mark.png", new BMap.Size(86, 90), { anchor: new BMap.Size(10, 25), }); // 创建标注对象并添加到地图 let marker = new BMap.Marker(point, { icon: myIcon }); map.addOverlay(marker);
marker点击事件
marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); //提示信息 });
拖拽marker,获取移动的坐标
marker.enableDragging();
//marker.disableDragging(); // 不可拖拽
marker.addEventListener("dragend", function (e) { var x = e.point.lng; //经度 var y = e.point.lat; //纬度 console.log("拖到的地点的经纬度:" + x + "," + y); });
标注点(marker)添加点击事件
marker.addEventListener("click", function(){ this.openInfoWindow(infoWindow); //提示信息 });
文本标注(label) 添加点击事件
label.addEventListener("click", function(){ map.openInfoWindow(infoWindow); //提示信息 });
显示信息窗口,infoWindow
1. 在map上绑定:map.openInfoWindow(infowin,point);
let opts = { width : 380, // 信息窗口宽度 height: 100, // 信息窗口高度
title : "电池柜信息" , // 信息窗口标题 }; let point = new BMap.Point(lng, lat); let info = new BMap.InfoWindow('测试内容', opts); // 创建信息窗口对象 that.map.openInfoWindow(info, point);
// 关闭弹窗
// map.closeInfoWindow();
2. 在marker上添加infoWindow即做法是marker.openInfoWindow(infowin);
注意:此方法有问题,每次点击marker时,地图会自动将窗口平移到地图中心,这时窗口就消失了。建议用第一种方法
let opts = { width : 380, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "电池柜信息" , // 信息窗口标题 }; let info = new BMap.InfoWindow('测试内容', opts); // 创建信息窗口对象
marker.openInfoWindow(info)
拖动地图得时候,marker标注消失 初始化地图的时候加入如下两行代码(虽然我也不知道什么意思,小声哔哔,暂时能解决问题就好)
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 4); this.map.enableScrollWheelZoom();
聚合点
1) 添加聚合点有个注意点,给markers赋值前,先清空
this.markers = [] new BMapLib.MarkerClusterer(this.map, {markers: markers});
2) 如果是用户可以选择数据,然后再添加聚合点,则需要每次添加聚合点之前都要清楚标注,聚合点
markerClusterer.clearMarkers(this.markerArr); this.map.clearOverlays();
3)清楚聚合点
markerClusterer.clearMarkers();
删除标注或者覆盖物
1.删除单一marker
marker.remove();
2.删除指定标注或者覆盖物
//获取地图上所有的覆盖物 var allOverlay = map.getOverlays(); for(var i = 0;i<allOverlay.length;i++) { if(allOverlay[i].toString()=="[object Marker]"){ if (allOverlay[i].getPosition().lng == longitude(待删除标注的经度) && allOverlay[i].getPosition().lat == latitude(待删除标注纬度)) { map.removeOverlay(allOverlay[i]); } } }
3. 删除所有标注或者覆盖物
map.clearOverlays();
地址打开百度地图或者高德地图
let lat = '' let lng = '' let address = address.replace(/\s*/g,""); let url ='http://uri.amap.com/markerposition='+lng+','+lat+'&name='+address+'&coordinate=gaode&callnative=1' http://api.map.baidu.com/geocoder?address=北京市海淀区上地信息路9号奎科科技大厦&output=html&src=webapp.baidu.openAPIdemo let bdUrl = 'http://api.map.baidu.com/marker?location='+lat+','+lng+'&title='+address+'&content=test&output=html&src=webapp.baidu.openAPIdemo' let bdUrl = 'http://api.map.baidu.com/marker?location='+lat+','+lng+'&title=电池位置&content='+address+'&output=html&src=webapp.baidu.openAPIdemo'
<a class="col col-1" href='+bdUrl+' target="_blank" >地址:'+(gps.Location.Address)+'</a>')
let opts = { width : 380, // 信息窗口宽度 height: infoContent.rowNum * 35 + 50 + 20, // 信息窗口高度 title : "电池柜信息" , // 信息窗口标题 }; // var point = new BMap.Point(lng, lat); let info = new BMap.InfoWindow(infoContent.content, opts); // 创建信息窗口对象 // that.map.openInfoWindow(info, point); testMarker.openInfoWindow(info)