Загрузка различных маркеров на основе значений с помощью Google Map API в Angular 7 - PullRequest
Новая
       24

Загрузка различных маркеров на основе значений с помощью Google Map API в Angular 7

0 голосов
/ 15 мая 2019

У меня есть приложение, которое извлекает список участников из базы данных и отображает их на карте с помощью Google Map API.Возвращенные данные как показано ниже: 

[
    {
        "id": 25,
        "firstName": "D",
        "middleName": "",
        "lastName": "Test",
        "lat": "39.2424525",
        "lng": "-76.5124078",
        "fullAddress": "132 main st baltimore maryland 21222",
        "zip": "21222",
        "draggable": false,
        "enrollments": [
            {
                "id": 9,
                "provider": "test",
                "zone": "zone18",
                "participantId": 25
            }
        ]
    }
...
]

HTML-код, который я использую для карты: 

<div class="card">
  <div class="card-body">

    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

      <agm-marker *ngFor="let m of participants" 
        [latitude]="m.lat" 
        [longitude]="m.lng" 
        [markerDraggable]="m.draggable"
        [iconUrl]="{
          url: mrk,
          scaledSize: {
              width: 45,
              height: 50
          }
        }"
        >

        <agm-info-window>
          <strong>Name: {{ m.firstName }} {{ m.lastName }}</strong>
        </agm-info-window>
      </agm-marker>

    </agm-map>

  </div>
</div>

Компонент 

export class MapResultComponent implements OnInit {
    participants: any[] = [];
    mrk;

    constructor(
     private participantService: ParticipantService
    ) { }

    ngOnInit() {
      this.loadParticipants();
    }

    private loadParticipants() {
      this.participantService.getAllActiveMap().subscribe(participants => {
         this.participants = participants;
         this.mrk = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';

        for (let i = 0; i < participants.length; i++) {
          if (participants[i].enrollments[0].zone === 'zone7') {
            this.mrk = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        }
       }

      });
    }

}

Я знаючто это не очень хороший подход.Поскольку в возвращаемых данных у меня есть поле zone7, все маркеры теперь становятся красными.Чего я хотел бы добиться, так это цветового кода по зонам.Это означает, что одни и те же зоны будут иметь одинаковый значок маркера.Зоны представляют собой простой категориальный текст, такой как zone1, zone2, zone3 .... zone24.Как я могу изменить значок маркера в зависимости от полей зоны?Любая помощь будет оценена.

1 Ответ

0 голосов
/ 16 мая 2019

Это можно сделать, добавив троичные операторы в [iconUrl], как показано ниже: 

[iconUrl]="{
  url:  m.enrollments[0].zone === 'zone10' ? 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' : 
        m.enrollments[0].zone === 'zone17' ? 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png' :
....
          scaledSize: {
              width: 45,
              height: 50
          }
        }"
...