百度地图基本事件： marker、polygon等覆盖物添加以及删除

marker拖拽获取坐标
 

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

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

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

 　　

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

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

 

覆盖物

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

 

 添加多边形覆盖物Polygon

let pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
map.addOverlay(pg);

 

添加文本标注label

let plb = new BMap.Point(116.408149,39.958087);
let lb = new BMap.Label('我是覆盖物Label',{point:plb});
map.addOverlay(lb);

 

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);
});

 

标注点（marker）添加点击事件，label其他覆盖物同理

marker.addEventListener("click", function(){          
    this.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.删除单一marker

marker.remove();

 

//获取地图上所有的覆盖物
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();

 

打开地图

地址打开百度地图

// 测试链接
// <a href="http://api.map.baidu.com/marker?location=39.197709,117.185226&title=电池位置&content=天津市北辰区朝阳路&output=html&src=webapp.baidu.openAPIdemo"></a>
// 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=测试&output=html&src=webapp.baidu.openAPIdemo'
let aNode = document.createElement('a')
aNode.setAttribute('href', url)
aNode.setAttribute('target', '_blank')
aNode.click()

 

地址打开高德地图

// 测试链接
<a href="https://uri.amap.com/marker?position=lng,lat&name=所在的位置名称"></a>

这有一个注意事项是：百度地图填写坐标是lat，lng，高德地图填写坐标是lng，lat

 

 

记录几个问题

问题：怎么监听地图点击？

map.addEventListener("click", function(){
　　alert("您点击了地图。");
});

 

问题：怎么获取用户拖动地图后地图中心的经纬度信息？

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("dragend", function(){
var center =map.getCenter();
　　alert("地图中心点变更为："+ center.lng +", "+ center.lat);
});

 

问题：怎么获取地图缩放后的级别？

var map=newBMap.Map("container");
map.centerAndZoom(newBMap.Point(116.404,39.915),11);
map.addEventListener("zoomend", function(){
　　alert("地图缩放至："+this.getZoom()+"级");
})

 

问题：当地图发生点击事件时，怎么知道点击的是覆盖物还是地图？

 map.addEventListener("click",function(e){
        if(e.overlay){
            alert('你点击的是覆盖物：'+e.overlay.toString());   
        }else{
            alert('你点击的是地图');
        }
    });

 

 

posted @ 2021-10-19 12:54  时光凉忆  阅读(5955)  评论(0)  编辑  收藏  举报