vue中谷歌地图标记点、聚合点图标自定义

最近用vue+谷歌地图做国外项目，地图需要有标记点和聚合点。
标记点：1，图标样式自定义 2，点击更换图标
聚合点：1，图标样式自定义

标记点自定义

标记点自定义图标主要是设置 url 地址，记住 url 直接引入图片的地址需要用到 require('../../***.png')
代码：

new google.maps.Marker({
  position: item,
  icon: {          //  icon对象里面设置标记点的图标和图标宽高
    url: require("../../../static/images/maker.png"),
    size: {
      width: 46,
      height: 50,
    },
  },
})
//  通过setIcon方法更换标记点图标
item.setIcon(require("../../../static/images/maker_touch.png"))

具体的其他属性可以参考官网：地图标记

聚合点自定义

聚合点更换图标也不复杂，官方给出的案例我试了，没有作用，参考的是源代码。
代码：

//  这里写五个是因为标记点必须要有五个，官方是有五个不同样式的标记点，这里我用的是相同的五个，
import mar1 from "../../../static/images/marker_clusterer1.png";
import mar2 from "../../../static/images/marker_clusterer2.png";
import mar3 from "../../../static/images/marker_clusterer3.png";
import mar4 from "../../../static/images/marker_clusterer4.png";
import mar5 from "../../../static/images/marker_clusterer5.png";
markerStyles:[
  {
    url:mar1,
    width:46,
    height:48,
    textSize: 16,  //  聚合点内字体大小，下面有更多属性
  },
  {
    url:mar2,
    width:46,
    height:48,
    textSize: 16,
  },
  {
    url:mar3,
    width:46,
    height:48,
    textSize: 16,
  },
  {
    url:mar4,
    width:46,
    height:48,
    textSize: 16,
  },
  {
    url:mar5,
    width:46,
    height:48,
    textSize: 16,
  },
],
//  关键在这句话，官方给的案例里面是 imagePath ，我试了没有作用
new MarkerClusterer(map, markers, { styles: this.markerStyles })
//  聚合点源码
  static withDefaultStyle(overrides: ClusterIconStyle): ClusterIconStyle {
    return {
      textColor: "black",
      textSize: 11,
      textDecoration: "none",
      textLineHeight: overrides.height,
      fontWeight: "bold",
      fontStyle: "normal",
      fontFamily: "Arial,sans-serif",
      backgroundPosition: "0 0",
      ...overrides,
    };
  }

具体的其他属性可以参考官网：地图聚合点
这个页面可以跳转到官方的聚合点github，里面可以看到用TS写的源码，有需要可以进行参考

完整代码

import mar1 from "../../../static/images/marker_clusterer1.png";
import mar2 from "../../../static/images/marker_clusterer2.png";
import mar3 from "../../../static/images/marker_clusterer3.png";
import mar4 from "../../../static/images/marker_clusterer4.png";
import mar5 from "../../../static/images/marker_clusterer5.png";
export default {
    name: "test",
    data() {
      return {
        // 谷歌地图聚合点样式更换
        markerStyles:[
          {
            url:mar1,
            width:46,
            height:48,
            textSize: 16,
          },
          {
            url:mar2,
            width:46,
            height:48,
            textSize: 16,
          },
          {
            url:mar3,
            width:46,
            height:48,
            textSize: 16,
          },
          {
            url:mar4,
            width:46,
            height:48,
            textSize: 16,
          },
          {
            url:mar5,
            width:46,
            height:48,
            textSize: 16,
          },
        ],
      }
    },
    methods: {
      // ---------------谷歌地图-------------------
      // 页面第一次渲染谷歌地图加载全部坐标点(显示聚合点)
      //  data参数是所有的标记点数组
      setAllGooglePosition(data) {
        let options = {
          zoom: 10,
          center: { lat: data[0].lat, lng: data[0].lng },
          zoomControl: true,
          // 操作按钮的位置
          zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER,
          },
          streetViewControl: false,
        }
        let map = new google.maps.Map(document.getElementById("screenGmap"), options)
        const markers = data.map((item, i) => {
          return new google.maps.Marker({
            position: item,
            icon: {
              url: require("../../../static/images/maker.png"),
              size: {
                width: 46,
                height: 50,
              },
            },
          })
        })
        markers.map((item, index) => {
          item.addListener("click", () => {
            //  点击标记点弹窗显示具体信息  this.$t 用的是I18N做的国际化
            let contentString = `<div id="window-box">
              <div>${ this.$t('mapMarker.title') }Lamp-post</div>
              <div><label>${ this.$t('mapMarker.lng') }：</label>${data[index].lng}</div>
              <div><label>${ this.$t('mapMarker.lat') }：</label>${data[index].lat}</div>
              <div><label>${ this.$t('mapMarker.name') }：</label>${data[index].label}</div>
              <div><label>${ this.$t('mapMarker.group') }：</label>${data[index].groupName}</div>
              <div><label>${ this.$t('mapMarker.device') }：</label>${data[index].count}</div>
            </div>`
            let infowindow = new google.maps.InfoWindow({
              content: contentString,
              minWidth: 200
            });
            //  通过setIcon方法更换标记点图标
            item.setIcon(require("../../../static/images/maker_touch.png"))
            infowindow.open(map, item);
            map.addListener('click', function() {
              item.setIcon(require("../../../static/images/maker.png"))
              infowindow.close();
            })
          });
        });
        new MarkerClusterer(map, markers, { styles: this.markerStyles })
      },
      // ---------------谷歌地图-------------------
	}
}

代码写的不是很成熟，不过基本的实现是有用，有哪里写的有错误的地方欢迎各位大佬指出。

注： 1，谷歌地图不是下载的第三方包使用的，我是直接引入的script，有了script，就可以使用谷歌地图的实例方法。
2，在国内用谷歌地图还有一个坑就是，首先需要fanqiang，其次就是用免费的很容易地图不出现，控制台打印：google is not defined ，这个时候检查一下有没有fanqiang，或者说fanqiang的网络好不好，当然如果这些问题都不存在，那就考虑一下是不是地图apikey的引入问题