为 <agm-marker> 设置自定义属性以进行过滤？答案

【问题标题】：Set custom properties for <agm-marker> for filtering?为 <agm-marker> 设置自定义属性以进行过滤？
【发布时间】：2019-07-22 20:07:07
【问题描述】：

我在 agm-map 上显示了一个 agm-markers 数组，如下所示：

<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 中可以）？

【问题讨论】：

您的 agm 标记阵列是由什么组成的？纬度和经度？您是否使用 ngFor 来显示它们？如果你能提供一些代码，那将有很大帮助！
我用模板中的 sn-p 更新了我的问题。

标签： google-maps angular-google-maps angular2-google-maps

【解决方案1】：

我认为您可以向标记对象添加一个新属性。你有一个标记数组，这些对象具有属性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>

这样就可以了。

P.D. 如果由于显式使用 agm-marker 类而无法创建自定义属性，则可以不定义标记数组的类型（将其设置为 any）或创建扩展 agm-marker 类的自定义类。

希望这会有所帮助！

【讨论】：

谢谢安东尼奥。当我按照您在模板中执行的方式过滤标记时，我收到编译错误“绑定不能包含分配”（这是一种不好的做法）。但我当然可以在 component.ts 中做到这一点。但是随后标记正在从数组中删除。但我认为只使特定类别中的 agm 标记不可见（通过 @Input() 可见）并将标记数组保持原样可能会更高效。
如果您不想覆盖原始数组，您可以使用两个：一个始终存储所有标记，另一个过滤您将在前端使用。

【解决方案2】：

正如 zolastro 指出的那样，您可以简单地向标记添加属性。然后，我对标记的 [visible] 属性设置了一个条件，如果过滤器不匹配，则使其不可见。

<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"
          [visible]="marker.category == 'categoryA'">
            <agm-info-window>
                <h2>{{marker.title}}</h2>
                <a routerLink="{{ marker.url }}">Details</a>
            </agm-info-window>
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

【讨论】：