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

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)
上一篇:百度地图API开发:多边形覆盖物鼠标高亮效果及单击事件


下一篇:希尔(Hill)密码(C语言)