效果图

安装

npm install vue-baidu-map --save

index.vue

<template>
  <div style="position:relative">
    <!-- :map-click="false" 禁用点击景点弹出详细信息  -->
    <baidu-map
      :center="center"
      :map-click="false"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :min-zoom="5"
      :max-zoom="19"
      :auto-resize="true"
      @ready="handler"
      class="baidumap"
    >
      <!-- 行政区域 -->
      <bm-boundary
        v-for="(item,index) in area_list"
        :key="index"
        :name="item.name"
        :stroke-weight="2"
        :fill-color="randomColor()"
        stroke-color="none"
      />
      <!-- 圆形覆盖物 -->
      <my-overlay
        v-for="item in area_list"
        :position="{lng: item.lng, lat: item.lat}"
        :key="item.name"
        :show-text="{text:item.name,value:item.number}"
        :cirstyle="setWH(item.number)"
        text="点击我"
        @click.native="nextLevel(item)"
      />
      <!-- 右键菜单 -->
      <bm-context-menu>
        <bm-context-menu-item
          :callback="refreshHandler"
          text="刷新"
        />
      </bm-context-menu>
    </baidu-map>
  </div>

</template>
  <style type="text/css">
/* body默认会有8px的margin,清除掉便不会出现纵向滚动条 */
body {
  margin: 0;
}
/* 去掉百度地图左下方的logo和文字 */
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}

.baidumap {
  /* 必须设置具体的高度，否则，百度地图无法显示 */
  height: 100vh;
}
</style>
<script>
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})
// 百度地图按需引入(IE不支持)
// import BmBoundary from 'vue-baidu-map/components/others/Boundary.vue'
import MyOverlay from './module/MyOverlay'
export default {
  components: {
    // BmBoundary,
    MyOverlay,
  },
  data() {
    return {
      // 中心点
      center: { lng: 116.395645, lat: 39.929986 },
      zoom: 6, // 放大显示级别
      // 实例化百度地图
      map: '',
      // 百度地图类
      BMap: '',
      // 显示在界面的数据源
      area_list: [
        { lat: '39.929986', lng: '116.395645', number: 20, name: '北京市' },
        { lat: '39.143930', lng: '117.210813', number: 30, name: '天津市' },
        { lat: '38.613840', lng: '115.661434', number: 10, name: '河北省' },
        { lat: '37.866566', lng: '112.515496', number: 100, name: '山西省' },
        { lat: '43.468238', lng: '114.415868', number: 200, name: '内蒙古自治区' },
        { lat: '41.621600', lng: '122.753592', number: 150, name: '辽宁省' },
        { lat: '43.678846', lng: '126.262876', number: 40, name: '吉林省' },
        { lat: '47.356592', lng: '128.047414', number: 36, name: '黑龙江省' },
        { lat: '31.249162', lng: '121.487899', number: 12, name: '上海市' },
        { lat: '33.013797', lng: '119.368489', number: 58, name: '江苏省' },
        { lat: '29.159494', lng: '119.957202', number: 360, name: '浙江省' }
      ],
      // 当前层级
      layers: 1
    }
  },
  methods: {
    handler({ BMap, map }) {
      // 百度地图样式
      const styleJson = [
        {
          'featureType': 'water',
          'elementType': 'all',
          'stylers': {
            'color': '#021019'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'highway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#147a92'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#0b3d51'
          }
        },
        {
          'featureType': 'local',
          'elementType': 'geometry',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'land',
          'elementType': 'all',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#08304b'
          }
        },
        {
          'featureType': 'subway',
          'elementType': 'geometry',
          'stylers': {
            'lightness': -70
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry.fill',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#857f7f'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#000000'
          }
        },
        {
          'featureType': 'building',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'green',
          'elementType': 'geometry',
          'stylers': {
            'color': '#062032'
          }
        },
        {
          'featureType': 'boundary',
          'elementType': 'all',
          'stylers': {
            'color': '#1e1c1c'
          }
        },
        {
          'featureType': 'manmade',
          'elementType': 'geometry',
          'stylers': {
            'color': '#022338'
          }
        },
        {
          'featureType': 'poi',
          'elementType': 'all',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.icon',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#2da0c6',
            'visibility': 'on'
          }
        }
      ]
      // 百度地图样式设置
      map.setMapStyle({
        styleJson: styleJson
      })
      this.map = map // 百度地图实例
      this.BMap = BMap // 百度地图类
    },
    // 下一级
    nextLevel(data) {
      console.log('点击覆盖物时候要进行的操作')
    },

    // 设置圆形覆盖物的宽高
    setWH(value) {
      const wh = {
        width: '',
        height: ''
      }
      if (value < 30) {
        wh.width = '60px'
        wh.height = '60px'
      } else if (value > 30 && value <= 60) {
        wh.width = '80px'
        wh.height = '80px'
      } else {
        wh.width = '100px'
        wh.height = '100px'
      }
      return wh
    },
    // 规定的颜色内，随机返回
    randomColor() {
      const colorList = [
        '#FFFF99',
        '#B5FF91',
        '#94DBFF',
        '#FFBAFF',
        '#FFBD9D',
        '#C7A3ED',
        '#CC9898',
        '#8AC007',
        '#CCC007',
        '#FFAD5C'
      ]
      const colorIndex = Math.floor(Math.random() * colorList.length)
      const color = colorList[colorIndex]
      colorList.splice(colorIndex, 1)
      return color
    },

    // 百度地图刷新
    refreshHandler(e) {
      console.log('在这里执行刷新操作')
    }
  }
}
</script>

MyOverlay.vue

<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true}"
    :style="cirstyle"
    pane="labelPane"
    @draw="draw"
  >
    <div>{{ showText.text }}</div>
    <div>{{ showText.value }}</div>

  </bm-overlay>
</template>
<script>
import { BmOverlay } from 'vue-baidu-map'
export default {
  components: {
    BmOverlay
  },
  props: {
    text: {
      type: String,
      required: true
    },
    // 覆盖物上面的文本
    showText: {
      type: Object,
      required: true
    },
    // 经纬度
    position: {
      type: Object,
      required: true
    },
    // 圆形覆盖物的样式
    cirstyle: {
      type: Object,
      required: true
    }
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload() // 当位置发生变化时，重新渲染，内部会调用draw
      },
      deep: true
    }
  },
  methods: {
    // 这是百度地图的重绘函数,用于维持覆盖物的位置（这里的值貌似会影响拖拉时的偏移度）
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 16 + 'px'
      el.style.top = pixel.y - 16 + 'px'
    }
  }
}
</script>

<style>
.sample {
  background: #2d8bda;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  border-radius: 50%;
}
.sample.active {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.sample div {
  box-sizing: border-box;
  width: 100%;
  height: 50%;
  margin: 0 auto;
  text-align: center;
}
.sample div:nth-of-type(1) {
  border-bottom: 1px solid white;
  z-index: 1;
}
.sample div:nth-of-type(2) {
  z-index: 2;
  color: #ff9933;
  padding-top: 0.5rem;
  font-weight: 700;
}
</style>

扩展

自定义vue-baidu-map 组件的信息窗体infowindow（百度地图信息窗体）样式修改