如何使用角度谷歌地图显示多个标记 - 角度 6答案

【问题标题】：how to display multiple markers using angular google maps - angular 6如何使用角度谷歌地图显示多个标记 - 角度 6
【发布时间】：2019-01-15 18:57:22
【问题描述】：

我正在尝试在谷歌地图上显示 2 个标记。但我不知道该怎么做。我只能在地图上看到一个标记。

这是我的 map.component.html 文件：

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

这是我的 map.component.ts 文件：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-marker',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MarkerComponent implements OnInit {
constructor() { }
jsonObject = [
{
deviceid: 123,
source: [10.8505, 76.2711],
destination: [34.083656,  74.797371],
location: [22.5726, 88.3639],
speed: 45,
driver: 'ABC',
vehiclenumber: 'KA01R45',
vehiclebrand: 'Honda',
vehiclemodel: 'CRDI',
status: 'danger'
},
{
deviceid: 345,
source: [13.0827, 80.2707],
destination: [19.0760, 72.8777],
location: [19.7515,  75.7139 ],
speed: 60,
driver: 'DEF',
vehiclenumber: 'KA01L45',
vehiclebrand: 'Hyundai',
vehiclemodel: 'CRDI',
status: 'idle'
}
]
lat: number = 39.817490;
lng: number = -0.231035;
ngOnInit() { 
this.getMarker();
}

getMarker() {
this.lat = { lat: this.jsonObject.location[0], lng: this.jsonObject.location[1]}
this.lng = { lat: this.jsonObject.location[0], lng: this.jsonObject.location[1]}
}
}

我正在遍历 jsonObject 以获取两个不同对象的位置。我想显示json中给出的位置的经纬度。

【问题讨论】：

标签： angular

【解决方案1】：

将 *NgFor 用于多个标记

 <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">

例如：https://stackblitz.com/edit/angular-google-maps-demo-za7bmp

【讨论】：