第三方托管WordPress站点中Google Maps MarkerClusterer默认图片无法正常显示的技术求助

这个问题我遇到过不少次——用CDN引入MarkerClusterer的时候，默认集群图标加载失败是因为CDN只给你传了JS文件，没带那些默认的图标资源。别担心，咱们不用npm也能搞定，两种方法任你选：

方法一：使用官方CDN托管的默认图标 #

你可以直接指定MarkerClusterer的imagePath参数，指向unpkg上托管的官方图标文件。这些图标和npm包里的默认图标完全一致，只需要在初始化时加上这个配置：

修改你的createCluster函数为：

function createCluster(){
  var mcluster = new MarkerClusterer(mymap, markers, {
    imagePath: "https://unpkg.com/@googlemaps/markerclusterer/dist/images/m"
  });
}

原理很简单：默认情况下MarkerClusterer会尝试加载相对路径images/m开头的图标文件（比如m1.png、m2.png），但你的网站环境里没有这些文件。通过指定完整的CDN路径，它就能正确拉取到官方托管的图标了。

方法二：自定义集群图标（适合个性化需求） #

如果你想换自己的图标，先把图标文件上传到WordPress的媒体库，拿到图标URL，然后通过styles参数自定义每个集群大小对应的图标：

示例代码：

function createCluster(){
  const clusterStyles = [
    {
      url: "https://yourwebsite.com/wp-content/uploads/2024/05/cluster-1.png", // 替换成你的图标URL
      height: 50,
      width: 50,
      textColor: "#fff",
      textSize: 16
    },
    {
      url: "https://yourwebsite.com/wp-content/uploads/2024/05/cluster-2.png",
      height: 60,
      width: 60,
      textColor: "#fff",
      textSize: 18
    },
    // 可以继续添加更多尺寸的图标配置
  ];

  var mcluster = new MarkerClusterer(mymap, markers, {
    styles: clusterStyles
  });
}

额外注意：修复Google Maps初始化的小问题 #

你的代码里Google Maps的script标签有个小错误——参数之间应该用&分隔，而不是;：

<!-- 原来的错误写法 -->
<script src="https://maps.googleapis.com/maps/api/js?key=<PRIVATEKEY>;callback=initMap"></script>

<!-- 改成下面这样 -->
<script src="https://maps.googleapis.com/maps/api/js?key=<PRIVATEKEY>&callback=initMap"></script>

这个错误可能会导致地图初始化异常，顺手修复掉更稳妥。

内容的提问来源于stack exchange，提问作者Sugarplumclaus