使用 Google Map API in Angular 7 根据值加载不同的标记

Question

我有一个应用程序可以从数据库中检索参与者列表并使用 Google 地图 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。如何根据区域字段更改标记的图标？任何帮助，将不胜感激。

Answer 1

这可以通过在 [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
          }
        }"

使用 Google Map API in Angular 7 根据值加载不同的标记

Loading different markers based on values using Google Map API in Angular 7

google-maps

marker

angular