如何在谷歌地图JavaScript上根据多个地址而不是纬度和经度显示多个标记

Question

在这里我使用的是Angular 7。我能够使用纬度和经度在地图上显示标记。有没有办法根据多个地址在地图上显示多个标记？

我能够在 agm 地图中使用地理编码 API 显示一个带有一个地址的标记，但无法在页面上显示具有多个标记的多个地址 init((。

我打电话给 带有参数和 API 密钥的"https://maps.googleapis.com/maps/api/geocode/json"。此 API 将地址转换为lat，并lng。

res["results"][0].geometry.location.lat
res["results"][0].geometry.location.lat

因此，我可以获取一个地址的详细信息并显示在年度股东大会地图上。

这是我在html中使用的结构

<agm-map [latitude]="latitide" [longitude]="langtitude" [zoom]="zoom">
</agm-map>

接口数据 ：

this.markers = [
{
"Address": "London Business School",
"title": "sharm el sheikh",
"iconUrl": "yellow-dot",
"label":"8/10"
},
{
"Address":"University of Cambridge",
"title": "Cairo",
"iconUrl": "green-dot",
"label":"7/10"
},
{
"Address":"Imperial College London",
"title": "Cairo",
"iconUrl": "green-dot",
"label":"7/10"
},
{
"Address":"King's College London",
"title": "Cairo",
"iconUrl": "green-dot",
"label":"7/10"
}
]
}

Answer 1

试试这样的事情

<agm-map [latitude]="latitide" [longitude]="langtitude" [zoom]="zoom">
<agm-marker [latitude]="lat1" [longitude]="lng1"></agm-marker>
<agm-marker [latitude]="lat2" [longitude]="lng2"></agm-marker>
</agm-map>

如果它是动态的，您也可以尝试循环

<agm-marker
*ngFor="let marker of markers"
[latitude]="marker.lat"
[longitude]="marker.lng">
</agm-marker>