google-maps - 设置自定义属性过滤?
问题描述
我在 agm-map 上显示了一组 agm 标记,如下所示:
<agm-map [latitude]="mapCenterLatitude" [longitude]="mapCenterLongitude" [zoom]="getMapZoom()" [mapTypeId]="'hybrid'">
<agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="marker.iconUrl">
<agm-info-window>
<h2>{{marker.title}}</h2>
<a routerLink="{{ marker.url }}">Details</a>
</agm-info-window>
</agm-marker>
</agm-marker-cluster>
</agm-map>
现在我希望能够按类别过滤它们。单击类别复选框应使所有不属于该类别的标记不可见。
如何将此类别添加到标记中?有没有办法添加自定义属性(这在纯 Google Maps API 中是可能的)?
解决方案
我认为您可以向标记对象添加一个新属性。您有一组标记,这些对象具有属性latitude
, longitude
, iconURL
...
您可以向这些标记添加新属性:
for (let marker of markers) {
marker.customProperty = 'my value'
}
然后在您的 html 模板中过滤它们。例如,您可以使用 filter 函数或创建另一个可以在 TypeScript 文件中过滤的数组来执行此操作。我会选择第一个选项:
<agm-map [latitude]="mapCenterLatitude" [longitude]="mapCenterLongitude" [zoom]="getMapZoom()" [mapTypeId]="'hybrid'">
<agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let marker of markers.filter(item => item.customProperty === 'desiredProperty)" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="marker.iconUrl">
<agm-info-window>
<h2>{{marker.title}}</h2>
<a routerLink="{{ marker.url }}">Details</a>
</agm-info-window>
</agm-marker>
</agm-marker-cluster>
</agm-map>
这样就可以了。
PD 如果由于显式使用 agm-marker 类而无法创建自定义属性,则可以不定义标记数组的类型(将其设置为any
)或创建扩展 agm-marker 类的自定义类。
希望这会有所帮助!
推荐阅读
- vim - 使用“EAGAIN(资源暂时不可用)”回溯打开文件时,Vim 卡住了
- html - ReactJS 链接到来自不同文件夹/项目的本地 HTML 文件
- python - TypeError:'int'对象不可下标python
- powershell - 在 Visual Studio Code 中,使用 Connect-AzAccount 登录 Azure 时,PowerShell 一直挂起
- apache-spark - google dataproc - 图像版本 2.0.x 如何将 pyspark 版本降级到 3.0.1
- javascript - 极端新手在 mousePressed() 事件方面需要帮助
- javascript - JS.elseif (audio2.play()) { audio2.muted}
- javascript - 在 React 中将字符串解析为导入的对象变量名
- python-3.x - 使用opencv提取帧,输出为空
- ruby - 红宝石无限循环