vue 使用百度地图JavaScript API GL 组件

<template>
  <div class="component">
    <el-card class="cardStyle">
      <!-- ready,地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例 -->
      <baidu-map
        id="map"
        class="mapStyle"
        :center="centerPoint"
        :zoom="10"
        :scroll-wheel-zoom="true"
        @ready="handler"
        @click="getPoint"
      >

        <!--镂空面绘制-->
        <bm-polygon
          :path="polygonPath"
           stroke-color="red"
          :stroke-opacity="0.5"
          :stroke-weight="2"
          :editing="true"
          @lineupdate="updatePolygonPath"
        />
        <!--点聚合以及marker点标记-->
        <bml-marker-clusterer :average-center="true" >
        <bm-marker v-for="marker of markerArr" :position="{lng: marker.lng, lat: marker.lat}"  />

        </bml-marker-clusterer>
        <!--行政区划-->
        <bm-boundary name="内蒙古自治区"
         :strokeWeight="2"
         strokeColor="blue"
          fillColor="transparent"
        />
        <bm-label
          content=""
          :position="{lng: 111.708897, lat: 40.827552}"
          :labelStyle="{color: 'red', fontSize : '24px'}"
          title="鄂博云矿区"/>



            <!--Marker点-->
<!--        <bm-marker-->
<!--          v-for="marker in markerArr"-->
<!--          :key="marker.id"-->
<!--          :position="marker"-->
<!--          animation="BMAP_ANIMATION_BOUNCE"-->
<!--        />-->
      </baidu-map>
    </el-card>
  </div>
</template>

<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  data() {
    return {
      //中心轴坐标
      centerPoint: {
        lng: 0,
        lat: 0,
      },
      markerArr: [
        {
          id: 0,
          lng: 111.642458,
          lat: 40.819445,
        },
      ],
      polygonPath: [
        {lng: 111.708897, lat: 40.827552},
        {lng: 111.715221, lat: 40.815323},
        {lng: 111.743104, lat: 40.821219},
        {lng: 111.737642, lat: 40.833229},
      ],
      markerPoint: {},
    };

  },

  components : {
    BmlMarkerClusterer
  },
  methods: {
    // 完成一次组件卸载 / 重新加载的方法，重新渲染
    handler() {
      this.centerPoint.lng = 111.642458;
      this.centerPoint.lat = 40.819445;
    },
    // 添加点击函数，点击后修改marker的经纬度
    getPoint(e) {
      // 点击获取point经纬度
      const { lng, lat } = e.point;
      // 获取一个随机不重复的字符串做为id
      let id = new Date().getTime() + parseInt(Math.random() * 10000);
      // 新增一个marker标记
      this.markerArr.push({
        id: id,
        lng: lng,
        lat: lat,
      });
      // console.log(this.markerArr)
    },
    updatePolygonPath (e){
      this.polygonPath = e.target.getPath()
    },
    // addPolygonPoint(e) {
    //   this.polygonPath.push({lng : 111.642458,lat :40.819445})
    // }

  },
};
</script>

<style scoped>
.mapStyle {
  width: 100%;
  height: calc(100vh - 130px);
}
.cardStyle {
  height: calc(100vh - 130px);
}
</style>