vue百度地图标记多个marker和marker点击事件处理

安装

安装步骤
vue项目中使用百度地图

需求描述

在地图上自动创建n个标记，每个点有对应的data。当点击指定标记弹出对应标记的信息，监听事件是一样的，但弹出来的信息要根据对应的标记来显示。

创建地图容器

<template>
  <div class='map-wrap'>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :point="true" @ready="handler">
      <bm-view class="map" />
    </baidu-map>
  </div>
</template>

初始化地图，默认数据

marker数据从父组件通过props转递给当前map地图组件，我们定义为markerdata

data数据分析

1. BMap: baidu-map组件ready时，通过handler函数将BMap和map实例对象保存在当前data中，方便后续进行百度地图的处理
2. map: baidu-map组件ready时，通过handler函数将BMap和map实例对象保存在当前data中，方便后续进行百度地图的处理
3. marker:将后续定义的marker实例对象保存在数组中
4. zoom: 初始化地图放大缩小的值
5. center: 初始化地图中心坐标

  props: {
    markerdata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      BMap: null,
      map: null,
      marker: [],
      zoom: 6,//地图放大缩小的值
      center: { lng: 116.404, lat: 39.915 },//地图坐标
    }
  },

地图上标记marker

setMarker函数为地图上增加坐标点

    setMarker() {
      this.map.clearOverlays()
      let bPoints = []
      if (this.markerdata.length > 0) {
        for (let i = 0; i < this.markerdata.length; i++) {
          //创建单个point
          const statePoint = new this.BMap.Point(this.markerdata[i].lng, this.markerdata[i].lat);
          bPoints.push(statePoint)
          //将marker保存在data函数中 后续需要使用
          this.marker[i] = new this.BMap.Marker(statePoint);
          //在地图中添加marker
          this.map.addOverlay(this.marker[i]);
          //marker的label显示
          //const label = new this.BMap.Label(this.markerdata[i].sitename, { offset: new BMap.Size(-10, 25) });
          // marker.setLabel(label);
          //marker  hover时的显示
          this.marker[i].setTitle(this.markerdata[i].sitename);
          //给marker添加点击事件
          this.marker[i].addEventListener("click", () => { this.getSiteDetail(i) }); //监听事件
        }
        //重新定义地图的缩放和中心点
        this.setZoom(bPoints)
      }
    },

完整组件

<template>
  <div class='map-wrap'>
    <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" :point="true" @ready="handler">
      <bm-view class="map" />
    </baidu-map>
  </div>
</template>
import { getSiteInfo } from '@/api/monitor/overview'
export default {
  name: 'Map',
  props: {
    markerdata: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      BMap: null,
      map: null,
      marker: [],
      zoom: 6,//地图放大缩小的值
      center: { lng: 116.404, lat: 39.915 },//地图坐标
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.setMarker()
    },
    setMarker() {
      this.map.clearOverlays()
      let bPoints = []
      if (this.markerdata.length > 0) {
        for (let i = 0; i < this.markerdata.length; i++) {
          const statePoint = new this.BMap.Point(this.markerdata[i].lng, this.markerdata[i].lat);
          bPoints.push(statePoint)
          this.marker[i] = new this.BMap.Marker(statePoint);
          this.map.addOverlay(this.marker[i]);
          //const label = new this.BMap.Label(this.markerdata[i].sitename, { offset: new BMap.Size(-10, 25) });
          // marker.setLabel(label);
          this.marker[i].setTitle(this.markerdata[i].sitename);
          this.marker[i].addEventListener("click", () => { this.getSiteDetail(i) }); //监听事件
        }
        this.setZoom(bPoints)
      }
    },
    getSiteDetail(i) {
      getSiteInfo({ 'siteuuid': this.markerdata[i].siteuuid }).then(response => {
        const res = response.data
        let content = `<table cellpadding="0" cellspacing="0" class="labelTable">
          <tr>
            <td  width="100">AP</td>
            <td>
              <span class="status-icon GREEN"></span>${res.apOnlineNum} / <span class="status-icon GRAY"></span>${res.apOfflineNum}
            </td>
          </tr>
          <tr>
            <td>AC</td>
            <td>
              <span class="status-icon GREEN"></span>${res.acOnlineNum} / <span class="status-icon GRAY"></span>${res.acOfflineNum}
            </td>
          </tr>
          <tr>
            <td>${this.$t('common.Gateway')}</td>
            <td>
              <span class="status-icon GREEN"></span>${res.gwOnlineNum} / <span class="status-icon GRAY"></span>${res.gwOfflineNum}
            </td>
          </tr>
        </table>`
        const opts = {
          width: 250, // 信息窗口宽度
          height: 210, // 信息窗口高度
          title: '<h4>' + this.markerdata[i].sitename + '</h4>', // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
        }
        const infoWindow = new this.BMap.InfoWindow(content, opts);
        this.marker[i].openInfoWindow(infoWindow)
      })
    },
    setZoom(bPoints) {
      console.log(bPoints);
      var view = this.map.getViewport(eval(bPoints));
      var mapZoom = view.zoom;
      var centerPoint = view.center;
      console.log(mapZoom, centerPoint);
      this.map.centerAndZoom(centerPoint, mapZoom / 1.1);
    },
  },
  watch: {
    markerdata: {
      handler: function (n) {
        this.map && this.setMarker()
      },
      deep: !0
    }
  }
}

---