vue 使用百度地图记录-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 使用百度地图记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考文档
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/infowindow
https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0

1.百度地图标注点点击出现infoWindow信息窗口添加点击事件

vue 使用百度地图记录,vue.js,前端,百度

var opts = {
          width: 200, // 信息窗口宽度
          height: 40, // 信息窗口高度
          title: `${point.name}`, // 信息窗口标题
        };
 var infoWindow = new BMap.InfoWindow(
   "<span id='markerbtn'>点击查看相关工单</span>",
   opts
 ); // 创建信息窗口对象

 marker.addEventListener("click", function () {
   map.openInfoWindow(infoWindow, bPoint); //开启信息窗口
   document.getElementById("markerbtn").onclick = function (e) {
     alert("门店编号：");
   };
 });

2.监听滚轮百度地图缩放层级

var map = new BMap.Map("container");
      map.addEventListener("zoomstart", function (e) {
        console.log(e.target.getZoom()); //监听缩放层级
      });

3.平移到指定经纬度点

 const bPoint = new BMap.Point(point.lon, point.lat); // 创建点
 map.panTo(bPoint); //平移到这个点

4.自定义覆盖物画个对话框

vue 使用百度地图记录,vue.js,前端,百度

	var point = new BMap.Point(IMlat, IMlon);
      map.enableScrollWheelZoom(true);//是否允许忘了
      map.centerAndZoom(point, 16);//地图放大到16层级
      // 自定义覆盖物 这是方框
      let content = `<span>${IMname}</span>`;
      let label = new BMap.Label(content, {
        position: point,
      });
      label.setStyle({
        padding: "5px 10px",
        textAlign: "center",
        color: "#fff",
        fontSize: "12px",
        backgroundColor: "#ED2D2D",
      });
      //这是个三角
      let content1 = `<span>&#9660;</span>`;
      let label1 = new BMap.Label(content1, {
        position: point,
      });
      label1.setOffset(new BMap.Size(0, 22));//设置三角偏移
      label1.setStyle({
        color: "#ED2D2D",
        backgroundColor: "transparent",
        border: "none",
      });
      label.setZIndex(999);
      map.addOverlay(label);
      map.addOverlay(label1);

5.设置点聚合，清除点聚合

参考链接：https://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.html

 <!-- 在index.html中引入 点聚合 -->
    <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

var map= new BMap.Map("container");
var markerClusterer = new BMapLib.MarkerClusterer(map, {
      markers: [],
      gridSize: 100,
      maxZoom: 18,
    }); //点聚合初始化
//设置点 点聚合
var markers = [];
function drawAreaPoint(AreaPointArr) {
	 if (markers.length > 0) {
        markerClusterer.clearMarkers(markers);//设置新的点需要先清除之前的点
      }
	 AreaPointArr.forEach((point) => {
	    let bPoint = new BMap.Point(point.lon, point.lat); // 创建点
	    markers.push(new BMap.Marker(bPoint));
	});
	markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
    }); //点聚合
}
 function clickreSet(handleSelect) {
      //清除聚合
      markers = [];
      if (markers.length > 0) {
        markerClusterer.clearMarkers(markers);
      }
    }