2017-12-17 6 views
2

Ich verwende Reverse Geocoding in Angular App.Reverse Geocoding mit Angular

Die benötigte Skript wird in index.html hinzugefügt

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

und die Komponentendatei sieht wie folgt aus

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

und in der Komponente HTML-Datei, dann ist es ausgeben soll die Adresse

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

aber es ist immer leer, jedoch diese Linie

console.log(this.address); 

gedruckt den richtigen Wert.

Antwort

1

Es gibt zwei Möglichkeiten, die ich hier sehe, aber ohne eine Reproduktion nicht bestätigen kann, also werde ich sie beide auflisten.

1) Du bist nicht in Schräg der Zone

Der Code, der die Variable für die Anzeige ändert sich nicht innerhalb Angular der Zone ausgeführt werden. Dies passiert bei Rückrufen von Drittanbieter-Bibliotheken, wie Sie es hier tun.

Um zu beheben, injizieren Sie die NgZone und wickeln Sie alle Änderungen, die in der Benutzeroberfläche mit this.ngZone.run angezeigt werden möchten, wie im folgenden Codebeispiel.

constructor(private ngZone: NgZone) {} 

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

2) Falsche this

Irgendwo auf dem Weg, haben Sie die this verloren, die auf Klasseninstanz Punkte, und Sie stattdessen das Ergebnis in etwas anderes zu schreiben. Sie console.log funktioniert, weil das auch falsch protokolliert this, und Angular zeigt nichts, weil die tatsächlichen Eigenschaft wurde nicht geändert.

+0

Sie mein Leben gerettet :) –

0

Ihre Komponente wurde möglicherweise nicht initialisiert, wenn Sie this.location festlegen, da Angular nicht steuert, wenn der Konstruktor aufgerufen wird.

Sie sollten versuchen, locate Anruf in ngOnInit platzieren, die garantiert, dass Ihre Komponente bereit ist, Daten gebunden Eigenschaften anzuzeigen:

ngOnInit() { 
    this.locate(); 
} 
+0

'Du bist nicht zone' in Angular ist korrekt Antwort hier – yurzui

+0

Danke, ich habe versucht, den Aufruf in 'ngOnInit' und es hat nicht funktioniert, aber die' ngZone' löste das Problem. –

Verwandte Themen