Установить пользовательские свойства длядля фильтрации? - PullRequest
Новая
       6

Установить пользовательские свойства длядля фильтрации?

0 голосов
/ 10 сентября 2018

У меня есть массив маркеров agm, отображаемых на карте 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>

Теперь я хочу иметь возможность фильтровать их по категориям. Нажатие флажка категории должно сделать все маркеры невидимыми, которые не принадлежат этой категории.

Как добавить эту категорию в маркер? Есть ли способ добавить пользовательские свойства (что возможно в чистом API Карт Google)?

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Как указал Золастро, вы можете просто добавить свойства к маркеру. Затем я сделал условие для свойства [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>
0 голосов
/ 12 сентября 2018

Я думаю, вы можете просто добавить новое свойство к вашему маркерному объекту.У вас есть массив маркеров, эти объекты имеют свойства 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>

И это подойдет.

PD Если вы не можете создать собственное свойство, потому что вы явно используете класс agm-marker, вы можетелибо не определяйте тип массива markers (установите его на any), либо создайте свой собственный класс, который расширяет класс agm-marker.

Надеюсь, это поможет!

...