爲什麼我無法保留通過谷歌地圖的返回地址

Question

我能夠得到google map的address但留不住address我page

這裏是我的代碼：

title:string; 

    informationWindowTitle:string; 

    address:string;   

    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    geocodeLatLng(lat, lng) { 
    var geocoder = new google.maps.Geocoder; 


     var latlng = { 
      lat: lat, 
      lng: lng 
      }; 

      geocoder.geocode({ 
      'location': latlng 
      }, function(results, status) { 
      if (status === 'OK') { 
       if (results[0]) { 

       //This is yout formatted address 
       //window.alert(results[0].formatted_address); 

       console.log(results[0].formatted_address); 

       this.title = results[0].formatted_address; 
       this.informationWindowTitle = results[0].formatted_address; 

       console.log(this.informationWindowTitle); 

       return results[0].formatted_address;   

       } else { 
       window.alert('No results found'); 
       } 
      } else { 
       window.alert('Geocoder failed due to: ' + status); 
      } 
      }); 


     } 

    loadMap(){ 


    this.geolocation.getCurrentPosition().then((position) => { 

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 





     let mapOptions = { 
     center: latLng, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 

    this.geocodeLatLng(position.coords.latitude,position.coords.longitude); 

    // console.log(this.address);  

    this.addMarker(); 

    // this.title = this.address;//results[0].formatted_address; 
    // this.informationWindowTitle = this.address;//results[0].formatted_address;   

    }, (err) => { 
     console.log(err);  
    }); 

    } 

addInfoWindow(marker, content){ 

    let infoWindow = new google.maps.InfoWindow({ 
    content: content 
    }); 

    google.maps.event.addListener(marker, 'click',() => { 
    infoWindow.open(this.map, marker); 
    }); 

} 

addMarker(){  

      let marker = new google.maps.Marker({ 
      map: this.map, 
      animation: google.maps.Animation.DROP, 
      position: this.map.getCenter() 
      }); 

      let content = '<h4>Your Current Location!</h4><p>'+this.address+'</p>';      

      this.addInfoWindow(marker, content);            

    } 

我想要做的是摘錄

geocodeLatLng(lat, lng) { 

     // this function returns address 

    } 

initializtion 1. loadMap（）2. geocodeLatLng（）

 loadMap(){ 


     this.geolocation.getCurrentPosition().then((position) => { 

     this.geocodeLatLng(position.coords.latitude,position.coords.longitude); // sending co-ordinates to above function which returns the address 


     this.addMarker(); // then adding marker 


     }, (err) => { 
      console.log(err);  
     }); 

     } 

please refer this for getting地址：how to get current postion name using google map api

當我分配這些屬性我沒有得到其值

 this.title = results[0].formatted_address; 
     this.informationWindowTitle = results[0].formatted_address; 

QUESTION爲什麼？但我能進去function geocodeLatLng()

Answer 1

嘗試增加回調，並使用箭頭功能保留此：

geocoder.geocode({'location': latlng}, (results, status) => { 
if (results[0]) { 
    this.doSomething(results[0].formatted_address); 
} 
else { 
    window.alert('No results found'); 
}... 

而且回調函數：

doSomething(formatted_address){ 
    this.title = formatted_address; 
    this.informationWindowTitle = formatted_address; 
} 

Answer 2

你的問題是，裏面的this.titlefunction(results, status) {...}不是您聲明的title。

你必須做什麼是使用箭頭功能

this.geocoder.geocode({ 
    'location': latlng 
}, (results, status) => { 
    if (status === 'OK') { 
    if (results[0]) { 

     //This is yout formatted address 
     //window.alert(results[0].formatted_address); 

     console.log('result[0]', results[0].formatted_address); 
     this.title = results[0].formatted_address; 
     this.informationWindowTitle = results[0].formatted_address; 

     console.log(this.informationWindowTitle); 

     // add this to force Angular detect Changes 
     this.changeDetectorRef.detectChanges(); 

     return results[0].formatted_address; 

    } else { 
     window.alert('No results found'); 
    } 
    } else { 
    window.alert('Geocoder failed due to: ' + status); 
    } 
}); 

當我測試你的代碼，角不當標題更新的檢測，所以我必須強制角度去做。這是使用ChangeDetectorRef的方法。

Import { ChangeDetectorRef } from '@angular/core'; 

constructor(..,public changeDetectorRef: ChangeDetectorRef){..} 

希望這可以幫助！