如何在HTTPGET（Angular 6）上向google地图组件动态添加标记

我正在使用Google Javascript API集成构建Angular 6应用程序。除了使用http get动态添加标记外，该映射还可以工作

这是

组件.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>

这将打印到控制台：

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

产生以下结果：

标记显示在DOM中，但不在地图上（您看到的标记是静态的，应该有两个）

我还试过别的方法： 动态添加标记可与按下按钮一起工作，如下所示：

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

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

产生以下结果：

标记显示在地图上的DOM和中

我还尝试了其他方法（第二部分）： 将http get请求放入按钮调用的方法中，如下所示：

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

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

btnClick（）{
this.http.get（“api/v1/Events/get/”+eventId+“/GetVenue/GetAddress”）.subscribe（结果=>{
控制台日志（结果）；
这个.addresses.push（结果）；
});
}

它仍然只是将标记添加到dom，而不是映射

---

有什么想法吗？

我认为您在使用服务呼叫时将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);

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

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);

---

哈哈哈，我已经为此工作了大约5个小时，在你发布这个之前不到2分钟就解决了。当我打印出get请求旁边的静态点并看到不同的数据类型时，我意识到了这个问题。现在一切都正常了：）有趣的部分来自c#/java（强类型）背景，在Address类中，纬度和经度都是number类型。这意味着它们在html文件中引用时也应该是一个数字…很高兴听到你明白了