vue-baidu-map 的使用

预览效果：

vue-baidu-map文档： https://dafrok.github.io/vue-baidu-map/#/zh/overlay/circle

<template>
  <div :class="[className]" :style="styleSizeName">
  	<!-- ak 仅在局部注册组件时声明 -->
    <baidu-map :center="center" :zoom="bdzoom" :mapStyle="mapStyle" :scroll-wheel-zoom="true" ak="***" @ready="handler"
      class="map">
      <!-- 地图左上角加入地图类型控件 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <!-- 行政区划范围 -->
      <!-- <bm-boundary name="常州市武进区" :strokeWeight="2" strokeColor="blue" fillColor="#66d9ef"></bm-boundary> -->
      <!-- 绘制多边形覆盖物 -->
      <bm-polygon :path="path" v-for="(path, index) in polygonPath.mPath" :key="index"
        :stroke-color="allcolor[index]" :fill-color="allcolor[index]" :fill-opacity="0.5" :stroke-opacity="0.2"
        :stroke-weight="3" :z-index="99" @click="clickPolygon(index, $event)" />
      <!-- 在地图中添加一个信息窗体 -->
      <bm-info-window :position="infoWindow.position" :title="infoWindow.title" :show="infoWindow.show">
        <p>{{ infoWindow.contents }}</p>
      </bm-info-window>
      <!--聚合动态添加的点坐标-->
  		<bm-marker-clusterer :averageCenter="true">
  			<bm-marker :icon="markerIcon" :position="center"></bm-marker>
  		</bm-marker-clusterer>
    </baidu-map>
  </div>
</template>
<script>
// 按需导入方式
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmMapType, BmPolygon, BmBoundary, BmInfoWindow, BmlMarkerClusterer, BmMarker } from 'vue-baidu-map'
import { mapStyle, polygonPath } from "@/utils/bmap.js"

export default {
  name: "bmapChart",
  components: {
    BaiduMap,
    BmMapType,
    BmPolygon,
    BmBoundary,
    BmInfoWindow,
    BmlMarkerClusterer,
    BmMarker
  },
  data() {
    return {
      mapStyle: mapStyle, // 自定义地图样式
      center: {
        lng: 119.842829,
        lat: 31.701875
      },
      bdzoom: 19, // 最大为19,最小为0
      polygonPath: polygonPath, // 多边形
      infoWindow: { // 信息窗口展示
        position: {},
        show: false
      },
      //地图标记点的图片
      markerIcon: {
        url: require("@/static/img/agencyCompany/geolocation.svg"),
        size: {
          width: 22,
          height: 30
        }
      }
    };
  },
  computed: {
    //固定形状与新增形状的颜色
    allcolor() {
      return this.polygonPath.mColor
    }
  },
  methods: {
    ///
    // getCurrentPosition(map) { // 获取当前定位
    //   console.log('aaaa');
    //   let geolocation = new BMap.Geolocation()
    //   geolocation.getCurrentPosition(position => {
    //     this.center = {
    //       lng: position.longitude,
    //       lat: position.latitude
    //     }
    //   })
    // },
    handler({
      BMap,
      map
    }) {
      console.log(BMap, map, 'bbbb')
      // this.getCurrentPosition(map)
      // 这里是移动端使用uniapp定位方法，pc使用删除
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          this.center = {
           	lng: res.longitude,
           	lat: res.latitude
          }
        }
      });
    },
    clickPolygon(index, { type, target, point, pixel }) {
      console.log(index, type, target, point, pixel, 'type, target, point, pixel');
      this.infoWindow = {
        position: point,
        show: true,
        title: this.polygonPath.infoData[index].title,
        contents: this.polygonPath.infoData[index].contents
      }
    }
  }
};
</script>

<style lang="scss">
.map {
  width: 100%;
  height: 100%;
}
</style>

utils/bmap.js 地图的配置信息————地图皮肤

// 地图样式定制
export const mapStyle = {
  styleJson: [{
    "featureType": "land",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#091220ff"
    }
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#113549ff"
    }
  }, {
    "featureType": "green",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#0e1b30ff"
    }
  }, {
    "featureType": "building",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "building",
    "elementType": "geometry.topfill",
    "stylers": {
      "color": "#113549ff"
    }
  }, {
    "featureType": "building",
    "elementType": "geometry.sidefill",
    "stylers": {
      "color": "#143e56ff"
    }
  }, {
    "featureType": "building",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#dadada00"
    }
  }, {
    "featureType": "subwaystation",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#113549B2"
    }
  }, {
    "featureType": "education",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#12223dff"
    }
  }, {
    "featureType": "medical",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#12223dff"
    }
  }, {
    "featureType": "scenicspots",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "color": "#12223dff"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "weight": 4
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "highway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#fed66900"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "arterial",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "weight": 2
    }
  }, {
    "featureType": "arterial",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "arterial",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffeebb00"
    }
  }, {
    "featureType": "arterial",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "arterial",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "arterial",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "local",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on",
      "weight": 1
    }
  }, {
    "featureType": "local",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "local",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "local",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "local",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#979c9aff"
    }
  }, {
    "featureType": "local",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "railway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "subway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "weight": 1
    }
  }, {
    "featureType": "subway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#d8d8d8ff"
    }
  }, {
    "featureType": "subway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "subway",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "subway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#979c9aff"
    }
  }, {
    "featureType": "subway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "continent",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "continent",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "continent",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "continent",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "city",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "city",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "city",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "city",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "town",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "town",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "town",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#454d50ff"
    }
  }, {
    "featureType": "town",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "districtlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "road",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "road",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "district",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "poilabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "manmade",
    "elementType": "geometry",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "districtlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffffff"
    }
  }, {
    "featureType": "entertainment",
    "elementType": "geometry",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "shopping",
    "elementType": "geometry",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "10"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "10"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "6"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "7"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "8"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "9"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,10",
      "level": "10"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "stylers": {
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "6"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "7"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "8"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels",
    "stylers": {
      "visibility": "off",
      "curZoomRegionId": "0",
      "curZoomRegion": "6,9",
      "level": "9"
    }
  }, {
    "featureType": "subwaylabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "subwaylabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "tertiarywaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "tertiarywaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "provincialwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "provincialwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "nationalwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "nationalwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "highwaysign",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "highwaysign",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "village",
    "elementType": "labels",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "district",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 20
    }
  }, {
    "featureType": "district",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "district",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "country",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "country",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff10"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "highway",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 20
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "nationalway",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 20
    }
  }, {
    "featureType": "provincialway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "provincialway",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 20
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels.text",
    "stylers": {
      "fontsize": 20
    }
  }, {
    "featureType": "cityhighway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "estate",
    "elementType": "geometry",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "tertiaryway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "scenicspotsway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "scenicspotsway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "universityway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "universityway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "vacationway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "vacationway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "geometry",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "geometry.fill",
    "stylers": {
      "color": "#12223dff"
    }
  }, {
    "featureType": "fourlevelway",
    "elementType": "geometry.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "transportationlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "transportationlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "transportationlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "transportationlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "educationlabel",
    "elementType": "labels",
    "stylers": {
      "visibility": "on"
    }
  }, {
    "featureType": "educationlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "educationlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "educationlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "transportation",
    "elementType": "geometry",
    "stylers": {
      "color": "#113549ff"
    }
  }, {
    "featureType": "airportlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "airportlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "medicallabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "medicallabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "medicallabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "scenicspotslabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "airportlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "entertainmentlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "estatelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "estatelabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "estatelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "businesstowerlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "companylabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "companylabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "companylabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "governmentlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "governmentlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "governmentlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "restaurantlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "restaurantlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "restaurantlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "hotellabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "hotellabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "hotellabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "shoppinglabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "shoppinglabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "shoppinglabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "lifeservicelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "carservicelabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "carservicelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "carservicelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "financelabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "financelabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "financelabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "otherlabel",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "otherlabel",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "otherlabel",
    "elementType": "labels.icon",
    "stylers": {
      "visibility": "off"
    }
  }, {
    "featureType": "manmade",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "manmade",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "transportation",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "transportation",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "education",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "education",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "medical",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "medical",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }, {
    "featureType": "scenicspots",
    "elementType": "labels.text.fill",
    "stylers": {
      "color": "#2dc4bbff"
    }
  }, {
    "featureType": "scenicspots",
    "elementType": "labels.text.stroke",
    "stylers": {
      "color": "#ffffff00"
    }
  }]
}

// 绘制多边形区域色块
export const polygonPath = {
  editing: false, // 是否可编辑边界点
  //绘制的多边形
  mColor: ['red', 'yellow', 'green'],
  // 以数组形式，可绘制多个区域。等级大的在前，等级小的靠后，从上往下一行行执行
  mPath: [
    [ // 例如这是整个公园
      { lng: '119.80704', lat: '31.703718' },
      { lng: '119.81897', lat: '31.698311' },
      { lng: '119.823282', lat: '31.698557' },
      { lng: '119.821126', lat: '31.693518' },
      { lng: '119.80704', lat: '31.673975' },
      { lng: '119.807031', lat: '31.703718' },
    ],
    [  // 这是公园内广场区
      { lng: '119.80947', lat: '31.693622' },
      { lng: '119.812488', lat: ' 31.693707' },
      { lng: '119.812542', lat: ' 31.690626' },
      { lng: '119.809551', lat: ' 31.690596' },
      { lng: '119.809452', lat: ' 31.69363' }
    ],
    [
      { lng: '119.85139', lat: '31.695055' },
      { lng: '119.853995', lat: '31.694747' },
      { lng: '119.85324', lat: '31.690507' },
      { lng: '119.850006', lat: '31.690523' },
      { lng: '119.851336', lat: '31.695039' },
    ],
  ],
  // 对应区域展示的信息
  infoData: [
    {
      title: '测试地块1',
      contents: '数量： 599, 个数： 25'
    },
    {
      title: '测试地块2',
      contents: '数量： 25, 个数： 14'
    },
    {
      title: '测试地块3',
      contents: '数量： 32, 个数： 54'
    },
  ],
  //始终显示的多边形
  color: [], // 作为固定绘制点颜色
  paths: [] // 作为固定绘制点区域
}

我这里是在大屏项目中使用的地图，所以地图样式要定制下相匹配的颜色，用不到请删除，自已DIY，或者默认效果。

地图样式定制参照： 【百度地图开放平台】https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

个性化地图加载缓慢出现白块的优化方案，可以看下我这篇文章，传送门