Question

我在agm地图上显示了一系列的ammm标记，如下所示：

<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中是可能的）？

Answer 1

我认为您可以只向标记对象添加一个新属性。您有一组标记，这些对象具有属性latitude，longitude，iconURL ...

您可以向这些标记添加新属性：

for (let marker of markers) { marker.customProperty = 'my value' }

然后在您的html模板中过滤它们。例如，可以使用过滤器功能或创建另一个可以在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类而无法创建自定义属性，则无法定义markers数组的类型（将其设置为any）或创建扩展了agm-marker的自定义类类。

希望这会有所帮助！

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

1 个答案: