angular - agm-marker-cluster 中的图像路径格式是什么?如何为不同类型分配不同的标记群集图标?

标签 angular google-maps markerclusterer

我有 Angular 谷歌地图,它在 map 上显示不同的数据类型。当我们缩小以表示数据类型时,我希望为 agm-marker-cluster 提供一个自定义图像。

我尝试将 imagePath 更改为项目目录中的图像,但没有成功,我可以在 map 上看到数据类型的数量,但看不到任何图像。

我的第一个问题是 imagePath 格式是什么?我觉得我的案例的问题在于 imagePath。根据我的研究,我们需要在路径末尾添加“/m”,我这样做了,对吗? 代码是这样的:

<agm-marker-cluster imagePath="/Content/Icons/example.png/m" >

第二个问题是如何为不同数据类型的 agm-marker-cluster 添加不同的图标/图像,我的意思是如何在代码中处理多个图像?

提前致谢。

最佳答案

所以我找到了答案,基于https://github.com/googlemaps/js-marker-clusterer我应该做的是将图像命名为 name1.png name2.png ... name5.png ,然后当我想在标记集群中使用它们时,我需要设置 imagePath ,如 imagePath= "imageFolderPath/name"所以不需要包含imagePath 中的 1,2, ... 和 .png。它有效并解决了这两个问题。

我的代码如下所示:

<agm-marker-cluster imagePath="/Content/Icons/name" >

在/Content/Icons 文件夹中,我有 name1.png name2.png name3.png

关于angular - agm-marker-cluster 中的图像路径格式是什么?如何为不同类型分配不同的标记群集图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52173097/

相关文章:

html - 删除 Angular Material slider 幻灯片上的强调色

angular - 使用 Http 和 DataSource 的 Material 2 分页

arrays - Angular 2 TS对象数组仅在订阅服务时定义

ios - Google Map iOS SDK - 清除可见区域内和不可见区域内的所有标记

android - Google Maps Android v2 中的集群标记

angular - 为什么我可以通过修改从选择器接收的对象来修改状态?

android - Google map v2 上的动画标记

jquery - 通过纬度和经度按最近距离对地址列表进行排序

javascript - GoogleMaps MarkerClusterer 信息窗口位置

javascript - markerclusterer 鼠标悬停不起作用