Angular 5中agm-cluster-marker集群图标不显示仅数字显示问题

嘿，我来帮你搞定这个问题！你现在只看到集群数字却没背景图标，大概率是imagePath的配置逻辑没搞对，或者缺少必要的样式配置，下面是具体的排查和解决方法：

1. 先搞懂imagePath的正确用法 #

你现在写的imagePath="'cluster.png'"是不对的哦～agm的集群组件默认需要一组按规则命名的图标文件，而不是单个png。它会根据集群的标记数量自动匹配不同的图标，比如cluster1.png、cluster2.png、cluster3.png这类命名的文件。

• 首先准备好几张不同的集群图标（或者用同一张也可以），命名成cluster1.png、cluster2.png...这样的格式，放在项目的assets目录里，比如assets/cluster-icons/下。
• 然后把imagePath改成路径前缀，比如imagePath="assets/cluster-icons/cluster"（注意不要加.png，组件会自动补数字和后缀）。

2. 自定义单图标背景（更简单的方式） #

如果不想搞一组图标，只想用一张图作为所有集群的背景，那直接用clusterOptions来配置自定义样式就好，修改你的代码如下：

模板文件（html）： #

<agm-map 
  [latitude]="lat" 
  [longitude]="lng" 
  [fullscreenControl]='true' 
  [zoom]="zoom" 
  [disableDefaultUI]='false' 
  [zoomControl]='false' 
  [mapTypeControl]='true' 
  (mapClick)="mapClicked($event)" 
  [mapTypeId]="'terrain'"
> 
  <agm-marker-cluster [clusterOptions]="customClusterStyle">
    <agm-marker 
      *ngFor="let m of markers;let i = index" 
      (markerClick)="clickedMarker(m, i)" 
      [latitude]="m.lat" 
      [longitude]="m.lng" 
      [markerDraggable]="m.draggable" 
      [iconUrl]="icon"
    >
    </agm-marker>
  </agm-marker-cluster>
</agm-map>

组件文件（ts）： #

在你的组件类里添加这个配置对象：

customClusterStyle = {
  styles: [
    {
      url: 'assets/your-cluster-icon.png', // 替换成你的集群背景图标路径
      textColor: '#fff', // 数字的颜色，比如白色
      textSize: 16, // 数字的字号
      width: 40, // 图标的宽度
      height: 40, // 图标的高度
      anchor: [20, 20] // 数字相对于图标的定位，可选
    }
  ]
};

这样就能让数字显示在你指定的背景图标上面了～

3. 检查资源是否能正常加载 #

别忘了确认你的图标文件确实在正确的位置，并且Angular打包时会包含它：

• 看看angular.json里的assets配置，是否包含了图标所在的目录，比如：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

• 可以直接在浏览器地址栏输入图标路径（比如http://localhost:4200/assets/your-cluster-icon.png），如果能打开图片，说明路径没问题；如果打不开，那就是文件放错地方或者路径写错了。

4. 版本兼容小提示 #

如果上面的方法都没用，检查一下@agm/core和@agm/js-marker-clusterer的版本是否匹配，有时候版本不兼容也会导致样式不生效，建议升级到最新的兼容版本试试。

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