vue-baidu-map添加覆盖物-点

vue-baidu-map添加覆盖物-点

vue-baidu-map 简单封装了
components/index.vue

引用vue插槽 方便使用，也可直接插入

  <slot></slot>

<!--
 * @Description: 百度地图组件
 * @Author: Dragon
 * @Date: 2020-12-31 13:18:38
 * @LastEditTime: 2020-12-31 16:19:24
 * @LastEditors: Dragon
-->

<template>
  <div class="wrap-map">
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :map-click="mapClick"
      :double-click-zoom="doubleClickZoom"
      :scroll-wheel-zoom="scrollWheelZoom"
      :inertial-dragging="inertialDragging"
      @click="handleMapClick"
      @ready="readyLoad"
      @moveend="moveend"
      @zoomend="zoomend"
    >
      <!-- 切换地图类型控件 -->
      <bm-map-type anchor="BMAP_ANCHOR_TOP_LEFT"  :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" />

      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT" />
      
      <!-- 定位 -->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

      <!-- 覆盖物-点(集合) -->
      <slot></slot>
    </baidu-map>
  </div>
</template>

<script>

export default {
  props: {
    center: {                // 中心点
      type: Object,
      default: () => {},
    },
    zoom: {                  // 缩放等级
      type: Number,
      default: 10,
    },
    mapClick: {              // 是否允许点击 该项仅在地图组件挂载时加载一次
      type: Boolean,
      default: true,
    },
    doubleClickZoom: {       // 是否允许双击缩放
      type: Boolean,
      default: true,
    },
    scrollWheelZoom: {       // 是否允许鼠标滚轮缩放
      type: Boolean,
      default: true,
    },
    inertialDragging: {      // 是否允许惯性拖拽
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      map: null,
    }
  },
  methods: {
    
    // 挂载
    readyLoad({ BMap, map }) {
      this.map = BMap;
    },

    // 地图移动结束时触发此事件
    moveend(e) {
       console.warn(e, '移动结束')
    },

    // 地图更改缩放级别结束时触发触发此事件
    zoomend(e) {
      console.warn(e, '缩放级别结束')
    },
    
    // 单击
    handleMapClick(e) {
      console.warn(e.point, '鼠标单击')
    },

  }
}
</script>

<style lang="scss">
.wrap-map {
  width: 100%;
  height: calc(100vh - 90px);;
  .map {
    width: 100%;
    height: 100%;
  }
  /*隐藏百度logo和copyright*/
  .anchorBL a,
  .BMap_cpyCtrl {
    display: none;
  }
  .BMap_scaleCtrl {
    inset: auto auto 18px 10px !important;
  }
}
</style>

Marker.vue
加个 $nextTick延迟更新

<!--
 * @Description: 覆盖物-点
 * @Author: Dragon
 * @Date: 2020-12-31 13:28:36
 * @LastEditTime: 2020-12-31 16:21:04
 * @LastEditors: Dragon
-->
<template>
  <baidu-map :center="mapCenter" :zoom="zoom">
    <template>
    <div v-if="markers.length > 0">
      <bm-marker
        v-for="(item, index) in markers"
        :key="index"
        :position="item.point"
        :dragging="true"
        :icon="
          !item.warning
            ? {
                url: require('@/assets/person_1.png'),
                size: { width: 50, height: 50 },
              }
            : {
                url: require('@/assets/warning.gif'),
                size: { width: 50, height: 50 },
              }
        "
      >
        <bm-label
          :content="item.name"
          :label-style="{
            padding: '2px 5px',
            color: 'red',
            fontSize: '8px',
            borderRadius: '10%',
          }"
          :offset="{ width: 15, height: -15 }"
        />
      </bm-marker>
    </div>
    </template>
  </baidu-map>
</template>

<script>
import BaiduMap from "./components";
export default {
  components: { BaiduMap },
  data() {
    return {
      mapCenter: {
        lng: "118.828094",
        lat: "32.09205",
      },
      zoom: 12,
      markers: [],
    };
  },
  created() {
    this.$nextTick(()=> {
      this.markers = [
        {
          name: "张三",
          point: { lng: 118.810559, lat: 32.208219 },
          warning: false,
        },
        {
          name: "王五",
          point: { lng: 118.666255, lat: 32.809396 },
          warning: false,
        },
        {
          name: "李四",
          point: { lng: 116.72879, lat: 32.397193 },
          warning: false,
        },
        {
          name: "小强",
          point: { lng: 118.834131, lat: 32.085932 },
          warning: true,
        },
        {
          name: "Dragon",
          point: { lng: 40.812057, lat: 59.221284 },
          warning: false,
        },
      ];
    })
    
  },
};
</script>

小白整理，不喜勿喷