【vue baiduMap】实现百度地图，多个标记点，自定义信息窗口样式

实现效果：

<template>
  <div id="baidu-map">
    <!-- <bm-polyline :path="lineList" stroke-color="red" :stroke-opacity="0.5" :stroke-weight="2"></bm-polyline> -->
  </div>
</template>

<script>
let mapConstructor;
import iconCar from "../../../assets/农机服务/地标-正常.png";
import iconCar2 from "../../../assets/农机服务/地标-正常.png";
export default {
  name: "BaiduMap",
  props: {
    gj: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      active: false,
      lineList: [],
      map: null,
      polyline: null,
      polygon: null,
      marker: null,
      marker2: null,
      isTrackLoaded: false,
      markers: [
        { lng: 116.404, lat: 39.915, info: "天安门" },
        { lng: 116.404, lat: 39.925, info: "故宫" },
        { lng: 116.414, lat: 39.915, info: "人民大会堂" }
      ],
      markerList: []
    };
  },
  mounted() {
    console.log("当前", this.gj);
    this.initMap(this.markers[0].lng, this.markers[0].lat);

    // this.initMap(30.679516965556886,97.09571635926318);
  },
  watch: {},
  methods: {
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
    initMap(lng, lat) {
      // 初始化地图
      this.map = new BMap.Map("baidu-map");
      const point = new BMap.Point(lng, lat); // 设置中心点坐标
      this.map.centerAndZoom(point, 13.5); // 初始化地图,设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      
      console.log("当前坐标1", this.gj);
      this.addMarkers();
      
    },
    addMarkers() {
      // 清除已有的标记点
      this.clearMarkers();

      // 遍历 markers 数组添加标记点
      this.markers.forEach(item => {
        const icon = new BMap.Icon(iconCar, new BMap.Size(32, 32), {
          //图片大小
          anchor: new BMap.Size(10, 25) //标注相对point的偏移位置
        }); // 替换为你的图标路径和大小
        // 可选：设置图标的锚点、偏移量等
        icon.setImageSize(new BMap.Size(32, 32)); // 如果图标大小和图片实际大小不同，可以设置
        icon.setAnchor(new BMap.Size(16, 16)); // 设置锚点到图标的中心
        const point = new BMap.Point(item.lng, item.lat);
        const marker = new BMap.Marker(point, { icon: icon });

        // 将标记点添加到地图
        this.map.addOverlay(marker);

        // 可以添加自定义信息窗口
        if (item.info) {
          // var opts = {
          //   width: 100, // 信息窗口宽度
          //   height: 100, // 信息窗口高度
          //   title: "", // 信息窗口标题
          //   message: ""
          // };
          var content = `
          <div class='boxs'>
            <p>收割机005</p>
              <p>设备状态:&nbsp;工作中</p>
              <p>作业区域:&nbsp;城西二路</p>
            </div>
              `;
          const infoWindow = new BMap.InfoWindow(content);
          marker.addEventListener("click", () => {
            this.map.openInfoWindow(infoWindow, point);
          });
        }

        // 保存标记点实例
        this.markerList.push(marker);
      });

      // 如果有标记点，调整视图以包含所有标记
      if (this.markers.length > 0) {
        this.setViewport();
      }
    },
    clearMarkers() {
      this.markerList.forEach(marker => {
        this.map.removeOverlay(marker);
      });
      this.markerList = [];
    },
    // 调整视图以包含所有标记点
    setViewport() {
      const points = this.markers.map(
        item => new this.BMap.Point(item.lng, item.lat)
      );
      this.map.setViewport(points, {
        margins: [50, 50, 50, 50], // 上右下左的边距
        zoomFactor: 0.8 // 缩放因子
      });
    }
    
  }
};
</script>
<style scoped>
::v-deep .BMap_pop {
  > div,
  > img:nth-child(10) {
    display: none;
    overflow: unset;
  }
  > div:nth-child(9) {
    display: block;
    overflow: unset;
    min-width: 320px !important;
  }
  > div:nth-child(8) {
    /*display: block;*/
  }
  .BMap_top {
    display: none;
  }
  .BMap_center {
    background: transparent;
    border: none;
    position: sticky !important;
    height: 100%;
  }
}

::v-deep .BMap_bubble_content {
  background: url(../../../assets/农机服务/弹窗.png) no-repeat;
  background-size: 100% 100%;
  /* background: rgba(255, 255, 255, 1); */
  /* box-shadow: 0px 0px 8px 0px rgba(0, 14, 38, 0.2); */
  border-radius: 5px;
  padding: 20px;

  .info-window {
    /* width: 50px;
    height: 200px; */
  }
  .boxs {
    width: 200px;
    height: 130px;
    box-sizing: border-box;
    padding: 5% 5% 5% 10%;
  }
  .boxs > p:nth-child(1) {
    color: #46beb1;
    margin-bottom: 3%;
  }
  .boxs > p:nth-child(2) {
    color: #194d47;
    margin-bottom: 3%;
  }
  .boxs > p:nth-child(3) {
    color: #194d47;
  }
}

#baidu-map {
  width: 100%;
  height: 100%;
}
</style>