參考文檔
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.百度地圖標(biāo)注點點擊出現(xiàn)infoWindow信息窗口添加點擊事件

var opts = {
          width: 200, // 信息窗口寬度
          height: 40, // 信息窗口高度
          title: `${point.name}`, // 信息窗口標(biāo)題
        };
 var infoWindow = new BMap.InfoWindow(
   "<span id='markerbtn'>點擊查看相關(guān)工單</span>",
   opts
 ); // 創(chuàng)建信息窗口對象

 marker.addEventListener("click", function () {
   map.openInfoWindow(infoWindow, bPoint); //開啟信息窗口
   document.getElementById("markerbtn").onclick = function (e) {
     alert("門店編號：");
   };
 });
 

2.監(jiān)聽滾輪百度地圖縮放層級

var map = new BMap.Map("container");
      map.addEventListener("zoomstart", function (e) {
        console.log(e.target.getZoom()); //監(jiān)聽縮放層級
      });

3.平移到指定經(jīng)緯度點

 const bPoint = new BMap.Point(point.lon, point.lat); // 創(chuàng)建點
 map.panTo(bPoint); //平移到這個點

4.自定義覆蓋物畫個對話框

	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));//設(shè)置三角偏移
      label1.setStyle({
        color: "#ED2D2D",
        backgroundColor: "transparent",
        border: "none",
      });
      label.setZIndex(999);
      map.addOverlay(label);
      map.addOverlay(label1);

5.設(shè)置點聚合，清除點聚合

參考鏈接：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,
    }); //點聚合初始化
//設(shè)置點 點聚合
var markers = [];
function drawAreaPoint(AreaPointArr) {
	 if (markers.length > 0) {
        markerClusterer.clearMarkers(markers);//設(shè)置新的點需要先清除之前的點
      }
	 AreaPointArr.forEach((point) => {
	    let bPoint = new BMap.Point(point.lon, point.lat); // 創(chuàng)建點
	    markers.push(new BMap.Marker(bPoint));
	});
	markerClusterer = new BMapLib.MarkerClusterer(map, {
        markers: markers,
    }); //點聚合
}
 function clickreSet(handleSelect) {
      //清除聚合
      markers = [];
      if (markers.length > 0) {
        markerClusterer.clearMarkers(markers);
      }
    }

6.點聚合點擊事件屏幕抖動

下載這個js文章來源地址http://www.zghlxwxcb.cn/news/detail-539449.html

到了這里，關(guān)于vue 使用百度地圖記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！