Agm 谷歌地图 - 如何将纬度和经度绑定到 HTML

【问题标题】：Agm google maps - how to bind latitude and longitude to HTMLAgm 谷歌地图 - 如何将纬度和经度绑定到 HTML
【发布时间】：2018-10-14 00:22:23
【问题描述】：

我在绑定从 AJAX 响应中获得的纬度和经度参数时遇到问题。如果我在 HTML 中硬编码纬度和经度，它可以正常工作。但是当我从响应中传递数据时，它就不起作用了。

  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
                <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
              </agm-map>

     ngOnInit() {
        this.getTransactionView(this.selectedTransaction);
      }

    getTransactionView(selectedTransaction): void {

        const resultArray = {
          'latitude': '51.525244',
          'longtitude': '-0.141186'
        };
        this.transactionResult = resultArray;
        this.latitude = this.transactionResult.latitude;
        this.longitude = this.transactionResult.longtitude;
       console.log(this.latitude);
      console.log(this.longitude);
// console.log prints the values, but after binding to HTML , it doesnt display the marker
      }
}

【问题讨论】：

为什么我没有得到任何解决方案

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

【解决方案1】：

最有可能发生这种情况，因为提供了string 类型的值。

AgmMarker 期望 latitude 和 longitude 值为 number 类型，例如：

map.component.html：

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

map.component.ts：

export class MapComponent implements OnInit {
  lat: number;
  lng: number;
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.initData();
  }


  initData(): void {
    this.http.get<{}>('./assets/data.json')
    .subscribe(result => {
      console.log(result);
      this.lat = parseFloat(result['lat']);
      this.lng = parseFloat(result['lng']);
    });
  }

}

Here is a demo供您参考

【讨论】：