vue谷歌地图聚合功能

五申请秘钥在 入口文件里面引入 写入key值

<script src="http://maps.google.cn/maps/api/js?key="></script>

写入一个存放地图的div标签

<div id="googleMap" style="height: 100%;"></div>

五在vue模板里面引入自定义的聚合图标并且挂在在vue实例是哪个

  import mar0 from "./img/img/0.png";
  import mar1 from "./img/img/1.png";
  import mar2 from "./img/img/2.png";
  import mar3 from "./img/img/3.png";
  import mar4 from "./img/img/4.png";
  export default {
    data() {
      return {
        map:null,
        infowindow:null,
        clickTimer: null,
        imgUrl22 :require("../../../../static/img/marker-1.png"),
        imgUrl11 :require("../../../../static/img/marker0.png"),
        markerStyles:[
          {
            url:mar0,
            width:53,
            height:53,
          },
          {
            url:mar1,
            width:56,
            height:56,
          },
          {
            url:mar2,
            width:66,
            height:66,
          },
          {
            url:mar3,
            width:78,
            height:78,
          },
          {
            url:mar4,
            width:90,
            height:90,
          },
        ],
        markerCluster:null
      };
    },

初始化地图

   mounted() {
      this.mapBuild(); //初始化实例之后调用
      this.setPoint(this.pointsguge); //地图数据
    },
    methods: {
      mapBuild() {
        let mapProp = {
          center:new google.maps.LatLng(39.839472,116.288262),
          zoom:7,//缩放级数
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        //自定义的聚合图标
        this.markerCluster = new MarkerClusterer(this.map, [],{imagePath:this.markerStyles});
      },
      removePoints(){//清楚坐标点
        this.markerCluster.clearMarkers()
      },
      setPoint(pointsguge){
         console.error(pointsguge)
        this.removePoints();
        this.latlngbounds = new google.maps.LatLngBounds();
        let markers =[];
        let marker;
        let position;
        for(let node of pointsguge){
          position = new google.maps.LatLng(node.lat, node.lon);
          let icon = node.noticeLevel == '-1'  ? this.imgUrl22 : this.imgUrl11;
          marker =new google.maps.Marker({
            position: position,
            icon: icon
          });
          this.latlngbounds.extend(position);
          markers.push(marker)
          this.clickInfo(marker,node,this)
        }
        this.markerCluster.addMarkers(markers,false)
        if(!this.latlngbounds.isEmpty()){
          this.map.setCenter( this.latlngbounds.getCenter());
        }
       // this.map.fitBounds( this.latlngbounds);
      },
      clickInfo(marker,node,that){
        google.maps.event.addListener(marker, 'click', function() {
         //单击事件
        });
        google.maps.event.addListener(marker, 'dblclick', function() {
         //双击事件
        });
      },
  
    },

五级标题

五级标题

五级标题

五级标题