百度地图3.0自定义mark弹窗样式,多个标注点例子

  最终效果

tempalte样式 

<template>

  <div>

<!--地图-->

      <div :id="containerId" class="map-div"></div>

  </div>

</template>

html引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxx"></script>

<!--自定义点击mark显示弹窗样式需要引入的js-->

<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>

 js

<script>
export default {
  name: "profile",
  data() {
    return {
      map: undefined,
      markersC: [
        {
          enableClicking: true,
          lng: 116.482529,
          lat: 39.923623,
          img: require("@/assets/modules/images/bird.png"), //标准店自定义图标
          title: "杜鹃",
          num: 172,
          label: "2023-05-02"
        },
        {
          img: require("@/assets/modules/images/bird.png"),
          enableClicking: true,
          lng: 116.50222,
          lat: 39.920026,
          title: "赤鸟",
          num: 73,
          label: "2023-05-02"
        },
        {
          enableClicking: true,
          img: require("@/assets/modules/images/bird.png"),
          title: "灰鹤",
          lng: 116.476061,
          lat: 39.879286,
          num: 82,
          label: "2023-05-02"
        },
        {
          enableClicking: true,
          img: require("@/assets/modules/images/bird.png"),
          title: "锦鸟",
          lng: 116.476061,
          lat: 39.877071,
          num: 67,
          label: "2023-05-02"
        },
        {
          enableClicking: true,
          img: require("@/assets/modules/images/bird.png"),
          title: "麻雀",
          lng: 116.476061,
          lat: 39.919805,
          num: 237,
          label: "2023-05-02"
        }
      ],
      containerId: "hazard-level-container2"
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    openInfo(item, point) {
      //弹框右上角关闭图标
      let closeicon = require("@/assets/modules/images/close.png");
      //弹框样式
      let info = `<div style="color:#fff;padding:10px;">
        <span style="font-size: 14px;">${item.title}
<span style="color: #F59A23;">：${item.num}</span>
        只</span>
        <div style="color:#ccc">${item.label}</div>
        </div>`;
      let infoBox = new BMapLib.InfoBox(this.map, info, {
        boxStyle: {
          opacity: "1",
          background: "rgba(125,178,205,0.9)",
          width: "150px",
          height: "50px",
          marginBottom: "40px"
        },
        // closeIconMargin: "18px 8px 4px 4px",
        closeIconUrl: closeicon,
        enableAutoPan: true
      });
      //打开弹框
      infoBox.open(point);
    },
    init() {
      // 创建地图
      this.map = this.initMap(this.containerId);
      // 百度地图API功能
      this.markers(); //获取标注
    },
    markers() {
      let mar = [];
      let iconSize = new BMap.Size(35, 44);
      let marker = [];
      let point = [];
      for (let i in this.markersC) {
        point[i] = new BMap.Point(this.markersC[i].lng, this.markersC[i].lat);
        let myIcon = new BMap.Icon(this.markersC[i].img, iconSize, {
          imageSize: iconSize
        });
        marker[i] = new BMap.Marker(point[i], {
          icon: myIcon,
          enableClicking: true
        });
        this.map.centerAndZoom(point[i], 14);
        this.map.addOverlay(marker[i]); // 将标注添加到地图中
        marker[i].addEventListener("click", r => {
          //打开自定义弹窗
          this.openInfo(this.markersC[i], point[i], this.map); //
        });
      }
    },
    initMap(containerId, options) {
      let map = new BMap.Map(containerId, {
        restrictCenter: false,
        minZoom: 3,
        maxZoom: 21
        // mapType: BMAP_EARTH_MAP //必须先设置3D效果再设置地图类型，否则3D效果无效
      });
      let center;
      if (options && options.centerX && options.centerY) {
        center = new BMap.Point(options.centerX, options.centerY);
      } else {
        center = new BMap.Point(116.609873, 40.083128);
      }
      let level = options && options.level ? options.level : 14;
      map.centerAndZoom(center, level);

      map.enableKeyboard();
      map.enableScrollWheelZoom();
      map.enableInertialDragging();
      map.enableContinuousZoom();
      map.setMapType(BMAP_HYBRID_MAP); //设置地图样式

      return map;
    }
  }
};
</script>

 css

<style scoped>
.map-div {
  width: calc(100% - 3.5rem);
  height: calc(100vh - 3rem);
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑", serif;
  /*border-radius: 5px;*/
  /*background-color: #1a1a1a;*/
}
</style>