我正在使用来自 https://angular-maps.com 的 Angular Google map .我想在 agm-marker 元素上使用 ngFor 指令显示多个标记。尽管 DOM 显示所有标记都存在,但 UI 仅显示 map 上的第一个标记。
这是 HTML 部分:
<agm-map [latitude]="lat" [longitude]="long" [zoom] = 16>
<agm-marker *ngFor="let m of latlongs; let i = index"
[latitude]="m.lat"
[longitude]="m.long"
[markerDraggable]="m.draggable"></agm-marker>
</agm-map>
typescript 代码在这里:
this.service.getData().subscribe(data => {
let json: any[] = [];
json["data"] = data.json().map(it => {
it["category"] = "location";
it["gallery"] = ["../assets/img/area.png"];
return it;
});
for(let i = 0; i < json["data"].length; i++){
this.mapInfos.push({lat: +json["data"][i].lat, long: +json["data"][i].long});
}
this.latlongs = this.mapInfos;
});
我正在为我的项目使用 angular 4
最佳答案
我建议您点击此链接 https://www.npmjs.com/package/@agm/js-marker-clusterer .
然后在此代码部分附加您的 for 循环:
<agm-marker [latitude]="51.673858" [longitude]="7.815982"></agm-marker>
latitude]="51.673858"[longitude]="7.815982">
关于angular - 在 Angular Google Map 中应该有多个标记时只显示一个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45653252/