笔记：百度地图API 标记回显

场景：接到需求----在地图上显示标记，根据后端数据的信息。（数据回显）

如图：

 

 废话不多说直接上才艺👇：

 methods: {
    // 地图
    MapHandle(
      clickSwitch = false, //是否开启打点
      points = {lat:"",lng:""} //传入的数据
    ) {
      let lat = points.lat;
      let lng = points.lng;
      this.mapObject = new BMapGL.Map("container"); // 创建Map实例
      this.mapObject.centerAndZoom(new BMapGL.Point(lat, lng), 12); // 初始化地图,设置中心点坐标和地图级别
      this.mapObject.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      // 添加点击事件+添加标记点
      this.mapObject.enableScrollWheelZoom(true);
      let marker = null; //标记点
      // 创建marker图标
      let myIcon = new BMapGL.Icon(
        require("./../../../../assets/img/marker2.png"),
        new BMapGL.Size(52, 65)
      );
      // 开启点击获取经纬度
      if (clickSwitch) {
        this.mapObject.addEventListener("click", (e) => {
          if (marker) {
            this.mapObject.removeOverlay(marker);
          }
          // 创建Marker标注，使用小车图标
          let pt = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
          marker = new BMapGL.Marker(pt, {
            // enableDragging: true, //点可以拖拽
          });

          // 更换标记点样式
          marker = new BMapGL.Marker(pt, {
            icon: myIcon,
          });
          // 将标注添加到地图
          this.mapObject.addOverlay(marker);
          this.formlanset.lat = String(e.latlng.lat);
          this.formlanset.lng = String(e.latlng.lng);
        });
      }
      // console.log("经纬度", lat, lng);
      let marker2 = new BMapGL.Marker(new BMapGL.Point(lat, lng), {
        icon: myIcon,
      });
      this.mapObject.addOverlay(marker2);
      // 创建信息窗口
      var opts = {
        width: 300, // 信息窗口宽度
        height: 120, // 信息窗口高度
        title: "设备信息", // 信息窗口标题
      };
      let sContent = `<h4 style='margin:0 0 5px 0;'>设备号：${points.data.parentid}</h4><h4 style='margin:0 0 5px 0;'>通道号：${points.data.domainid}</h4><h4 style='margin:0 0 5px 0;'>地址：${points.data.address}</h4><h4 style='margin:0 0 5px 0;'>设备状态：${points.data.onlineFlagStr}</h4>
    `;
      let infoWindow = new BMapGL.InfoWindow(sContent, opts);

      // marker添加点击事件
      marker2.addEventListener("click", function (e) {
        e.domEvent.stopPropagation();
        this.openInfoWindow(infoWindow); //展示
      });
    },
  },

 注意 ：这是vue写法