vue中使用google地图大批量渲染marker点

google地图大批量渲染marker点

废话不多说先看效果

前面有篇文章讲的是如何在vue中使用google地图
https://blog.csdn.net/zcc900726/article/details/88915985
在此基础上功能添加

先来json格式

data:[
{
Lat: "32.081697",
Lon: "121.07874989999998"
},{},{}......
]

大批量生成mark点;
chinaMaps 功能实现

<template>
  <div>
    <div id="Gmaps"></div>
    <remote-js
      jsUrl="https://maps.google.cn/maps/api/js?v=3&key=****************"
      :js-load-call-back="loadRongJs"
    ></remote-js>
  </div>
</template>

<script>
import RemoteJs from "./remote";
import "./../../utils/markerclusterer.js";

export default {
  props: {
    gData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      map: "",
      flag: false,
      markerClusterer: null
    };
  },
  components: {
    RemoteJs
  },
  created() {},
  methods: {
    loadRongJs() {
      this.flag = true;
      this.map = new google.maps.Map(document.getElementById("Gmaps"), {
        zoom: 2,
        center: { lat: 39.9612, lng: -82.9988 },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
      });
      this.setMaps();
    },
    setMaps() {
      //创建markers
      if (this.flag) {
        if (this.markerClusterer) {
        this.markerClusterer.clearMarkers();
        }
        let markers = this.gData.map(item => {
          var latlng = new google.maps.LatLng(item.Lat, item.Lon);
          var marker = new google.maps.Marker({
            position: latlng
          });
          return marker;
        });
         this.markerClusterer= new MarkerClusterer(this.map, markers,{ maxZoom: 15 });
      }
    }
  },
  watch: {
    gData: {
      handler: function(val, oldval) {
        this.setMaps();
      },
      deep: true,
      immediate: true
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#Gmaps {
  width: 100%;
  height: 28rem;
  border-radius: 5px;
}
</style>

使用的 markerclusterer.js包在这个项目例子里面
https://github.com/googlemaps/js-marker-clusterer

注意imges 文件也要复制过去,
还要修改markerclusterer.js 193行 图片相对地址
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = ‘/src/assets/gMapImgs/m’;
OK了~ 很简单吧~