Question

我正在编写一个角度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);
    }

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

Answer 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>

看看是否有帮助！

Answer 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>

Answer 3

你的html文件中的

在你的agm-map标签中添加这个（我也会先尝试这个没有自定义图标，以确保它们显示在地图上）：

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

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

3 个答案: