Question

在谷歌地图上工作，能够显示地图，我想显示当前位置但不显示

     export class AppComponent {
      title = '';

      ngOnInit() {
    if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (p) {
              var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);

              console.log(p.coords.latitude);
              console.log(p.coords.longitude);

              var geocoder = new google.maps.Geocoder();

             if (geocoder) {
            geocoder.geocode({ 'latLng': LatLng}, function (results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
             console.log(results[0].formatted_address);
                 this.title = results[0].formatted_address;
                 console.log(this.title);
                 }
           else {
            console.log("Geocoding failed: " + status);
           }
        });
      }
    });
      } else {
          alert('Geo Location feature is not supported in this browser.');
      }

}

在这里＆＃34; this.title＆＃34;，我正在获取当前位置

HTML代码

<h1> The Title is: {{title}}</h1>

在控制台中

我能看到标题值，为什么它不在html中绑定？

Answer 1

您正在使用title类范围内声明的变量AppComponent，位于geocode内回调函数的范围内。您必须使用“原始范围”访问标题。

诀窍是将this存储到变量中，在本例中是 AppComponent 的范围

export class AppComponent {
    title = '';
    var self = this;
    ......
}

然后在任何回调函数中使用它。在您的情况下，它是 geocode 调用

中的回调函数

geocoder.geocode({ 'latLng': LatLng}, function (results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
       console.log(results[0].formatted_address);
       self.title = results[0].formatted_address; //Here we are using self, as the original context of title
       console.log(this.title);
   }
   else {
       console.log("Geocoding failed: " + status);
   }
});

此处还在另一个问题this-becomes-null

中提供了答案

ngOninit变量在html angular 4中没有绑定

1 个答案: