如何使用角度谷歌地图api在谷歌地图中添加多个标记答案

【问题标题】：How to add multiple markers in google map using angular google map api如何使用角度谷歌地图api在谷歌地图中添加多个标记
【发布时间】：2018-03-21 12:06:53
【问题描述】：

我正在编写一个 Angular 4 Web 应用程序，我想根据纬度和经度添加多个标记。

城市的经纬度数组，

cities = [
    {lat: 12.972442, longi: 77.580643},
    {lat: 12.972234, longi: 77.580233},
    {lat: 12.972123, longi: 77.580623}
  ];

在我的模板中，

 <div  id="map">
      <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <agm-marker  [iconUrl]="iconUrl" [latitude]="latitude" [longitude]="longitude"></agm-marker>
      </agm-map>
      </div>

而在 onInit() 函数中，

public latitude: number;
public longitude: number;
    for ( let city of this.cities ) {
      this.latitude = city.lat;
      this.longitude = city.longi;
    }

我认为我错了，但我没有其他想法，请帮助我。添加与新想法相关的编辑，但地图现在未显示，这是更改，新增坐标类如下，

export class Coordinate {
    latitude: number;
    longitude: number;

    constructor(lat, lng) {
        this.latitude = lat;
        this.longitude = lng;
    }
}

在 html 中更新，

<agm-map [latitude]="latitude" [longitude]="longitude" (ngModel)="coordinates" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates" [iconUrl]="iconUrl" [latitude]="marker.latitude" [longitude]="marker.latitude"></agm-marker>
    </agm-map>

ngOnInit() 的变化，

 for ( let city of this.cities ) {
      const loc = new Coordinate(city.lat, city.longi);
      this.coordinates.push(loc);
    }

但是，标记没有添加，如果我错了，请纠正我。

【问题讨论】：

标签： angular google-maps angular-google-maps

【解决方案1】：

当您在 onInit() 中执行此操作时，您只需将 this.latitude 和 this.longitude 字段更改为城市数组中最后一个城市的纬度和经度。您只有一对纬度/经度，并且需要一组它们（用于多个坐标）。

您可能首先应该有一个类用于将它们存储在同一个对象中：

class Coordinate {
    latitude: number;
    longitude: number;

    constructor(lat, lng) {
        this.latitude = lat;
        this.longitude = lng;
    }
}

然后你可以像这样创建一个坐标数组：

// component fields
public coordinates: Coordinate[] = [];

ngOnInit() {
    for ( let city of this.cities ) {
        this.coordinates.push(new Coordinate(city.latitude, city.longitude));
    }
}

在模板中，*ngFor 您的标记，如下所示：

<div id="map">
    <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
        <agm-marker *ngFor="let marker of coordinates" [iconUrl]="iconUrl" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
    </agm-map>
</div>

看看有没有帮助！

【讨论】：

什么不起作用？你能不能稍微具体一点？您是只是复制并粘贴代码还是实际上尝试理解并自己实现它？试着让它工作，如果你做不到，问一个有有效错误/逻辑错误的问题，它发生在哪里以及预期的结果是什么。我无法通过“它不起作用”这句话来帮助你，这对我来说毫无意义。
我的意思是，我完全按照您的建议做了，创建了额外的坐标类并创建了该类的对象数组并在 ngm-marker 中使用。但是当我跑的时候，没有显示标记，控制台中也没有消息。
在问题中添加了更改，如果我错了，请纠正我

【解决方案2】：

使用位置属性

<agm-map [latitude]="latitude" [longitude]="longitude" (ngModel)="coordinates" [zoom]="zoom">
    <agm-marker *ngFor="let city of cities" [position]="[city.lat, city.longi]" [iconUrl]="iconUrl" ></agm-marker>
</agm-map>

【讨论】：

【解决方案3】：

在您的 html 文件中将其添加到您的 agm-map 标记中（我也会先尝试不使用自定义图标以确保它们显示在地图上）：

<agm-marker 
*ngFor="let x of cities; let i = index"
[latitude]="x.lat"
[longitude]="x.longi"
[iconUrl]="iconUrl"
>
</agm-marker>

【讨论】：