angular - 使用Angular反向地理编码

我在Angular应用中使用反向地理编码。

所需的脚本已添加到index.html中

<script async defer src="https://maps.googleapis.com/maps/api/js">
</scrip>

组件文件看起来像这样

import { Component } from '@angular/core';
declare const google: any;

export class MapComponent {

  lat;
  lng;
  address;

  constructor() {
    this.locate();
  }

  public locate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.lat = position.coords.latitude; // Works fine
          this.lng = position.coords.longitude;  // Works fine

          let geocoder = new google.maps.Geocoder();
          let latlng = new google.maps.LatLng(this.lat, this.lng);
          let request = {
            latLng: latlng
          };

          geocoder.geocode(request, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[0] != null) {
                this.address = results[0].formatted_address;  //<<<=== DOES NOT WORK, when I output this {{ address }} in the html, it's empty
                console.log(this.address);  //<<<=== BUT here it Prints the correct value to the console !!!
              } else {
                alert("No address available");
              }
            }
          });
        },
        error => {
          console.log("Error code: " + error.code + "<br /> Error message: " + error.message);
        }
      );
    }
  }
}

并在组件html文件中，应该输出地址

<div>{{ lat }}</div>        // Works fine
<div>{{ lng }}</div>        // Works fine
<div>{{ address }}</div>    // Deosn't Work, EMPTY

但它总是空的，
但是这条线

console.log(this.address);

打印正确的值。

最佳答案

我在这里看到了两种可能性，但是如果没有复制品就无法确认，因此我将它们都列出。

1)您不在Angular的区域

不在Angular的区域内执行更改显示变量的代码。当您像在此处那样使用第三方库中的回调时，往往会发生这种情况。

要修复此问题，请注入(inject)NgZone，并使用this.ngZone.run包裹想要在UI中反射(reflect)出来的所有更改，如以下代码段所示。

constructor(private ngZone: NgZone) {}

locate() {
  /* ... */
      this.ngZone.run(() => {
        this.location = results[0].formatted_address
      })
  /* ... */
}

2)错误的this
一路上的某个地方，您丢失了指向类实例的this，而是将结果写入其他内容。您console.log起作用的原因是，这也记录了错误的this，并且Angular不显示任何内容，因为实际的属性未更改。

关于angular - 使用Angular反向地理编码，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47853422/