首页 > 其他分享> > 百度地图基本事件， marker设置拖动获取坐标，添加聚合点

百度地图基本事件， marker设置拖动获取坐标，添加聚合点

2021-10-19 13:00:15 作者：互联网

marker拖拽获取坐标 https://www.cnblogs.com/niunan/p/6822124.html

如果添加大量聚合点的时候，请参考如下几篇文章

https://www.zhihu.com/question/24023333

https://blog.csdn.net/ztop_f/article/details/55256003

百度地图API 在使用点聚合时，如果放大、缩小或移动地图时，添加的文字标签会消失

https://www.jianshu.com/p/263cc04516ed

Makrer

添加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)

标签：map,窗口,拖动,let,marker,new,BMap,百度
来源： https://www.cnblogs.com/naturl/p/14475043.html

百度地图基本事件， marker设置拖动获取坐标， 添加聚合点

Makrer

百度地图基本事件， marker设置拖动获取坐标，添加聚合点