marker拖拽獲取座標
如果添加大量聚合點的時候，請參考如下幾篇文章
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(){
console.log('點擊了marker')
});
拖拽marker，獲取移動的座標
marker.enableDragging();
//marker.disableDragging(); // 不可拖拽
marker.addEventListener("dragend", function (e) { var x = e.point.lng; //經度 var y = e.point.lat; //緯度 console.log("拖到的地點的經緯度：" + x + "，" + y); });
聚合點 - markerCluseterer
創建聚合點
markers是事先創建好的marker集合
this.markers = [] new BMapLib.MarkerClusterer(this.map, {markers: markers});
清除聚合點
markerClusterer.clearMarkers(this.markers);
標註點（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賦值前，先清空
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)