时间戳

首页 > 解决方案 > 如何使用角度谷歌地图显示多个标记 - 角度 6

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

问题描述

我正在尝试在谷歌地图上显示 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

解决方案

对多个标记使用 *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

推荐阅读