angular - 如何在 HTTPGET (Angular 6) 上动态添加标记到谷歌地图组件

Question

我正在使用 AGM 构建一个带有 Google Javascript API 集成的 Angular 6 应用程序.除了使用 http get 动态添加标记外，该 map 有效。

这是component.html:

<agm-map [latitude]="51.017467" [longitude]="10.233982">
    <agm-marker *ngFor="let position of positions" [latitude]="position.latitude"
                [longitude]="position.longitude"></agm-marker>
</agm-map>

和component.ts:

export class EventsListComponent {
 public positions = [new Position(51.017467, 10.233982)]; // static point for debug

 constructor(public http: HttpClient) {
  let eventIds: string[] = ['5bffbac5596a7de59190dfbb']; // also for debug
  for (let eventId of eventIds) {
    this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
      console.log(result);
      this.addresses.push(result);
    });
  }
}

export class Address {

  constructor(
    public latitude: number,
    public longitude: number,
    public addressLine: string,
    public city: string,
    public state: string,
    public country: string,
    public zip) {
  }
}

这是打印到控制台:

{
"addressLine":"Gartenstraße 7",
"city":"Eschwege",
"country":"Germany",
"zip":"37269",
"state":"Hessen",
"latitude":"51.1821073",
"longitude":"10.0572713"
}

产生以下结果:

标记显示在 DOM 中但不显示在 map 上(您看到的标记是静态标记，应该有两个)。

我试过的其他东西:

动态添加标记可以像这样按下按钮:

<button (click)="btnClick()" class="btn btn-primary"></button>

然后在 component.ts 中:

btnClick() {
    this.addresses.push(new Address(51.1821073, 10.0572713,"","","","",""));
}

产生以下结果:

标记显示在 DOM 中和在 map 上。

我尝试过的其他方法(pt2):

将 http get 请求放入按钮调用的方法中，如下所示:

btnClick() {
    this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
    console.log(result);
    this.addresses.push(result);
  });
}

它仍然只将标记添加到 dom 而不是 map 。

有什么想法吗？

Answer 1

我认为您在使用服务调用时将 lat/lng 作为字符串传递(如控制台日志中的 "" 所示)，但您将其作为数字传递当你手动添加它时。尝试做这样的事情

this.addresses.push({
  addressLine: result.addressLine,
  city: result.city,
  country: result.country,
  zip: result.zip,
  state: result.state,
  latitude: +result.latitude,
  longitude: +result.longitude
});

或者你可以试着把它缩短成这样

result.latitude = +result.latitude;
result.longitude = +result.longitude;
this.addresses.push(result);