Google Places Autocomplete + Angular2
Baue ich eine einfache Google Places Autocomplete Angular2 Richtlinie, aber das problem ist, dass nicht die Vorhersage (die Antwort ist immer leer?!)...
Als proof-of-concept habe ich die einfachste mögliche code-snippet als Referenz:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script>
</head>
<body>
<button type="button" onclick="go()">go</button>
<input id="autocomplete" type="text"></input>
<script>
var autocomplete = null;
function go() {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
}
</script>
</body>
</html>
Der obige code funktioniert - ich kann Vorhersagen nach dem Klick auf " Go " button.
Nun, Angular2 Szenario:
Meiner _Layout.cshtml-Datei hat das folgende tag in den head-Abschnitt:
<script src="https://maps.googleapis.com/maps/api/js?key=[MY_API_KEY]&libraries=places" async defer></script>
Meine Richtlinie:
import {- Richtlinie, ElementRef, Input } von '@eckig/Kern'; deklarieren Sie var google: jede; @- Direktive({ selector: '[googleplaces]' }) export-Klasse GooglePlacesDirective { AutoVervollständigen: alle; Konstruktor(private-el: ElementRef) { } ngAfterContentInit() { diese.autocomplete = new google.maps.Orte.AutoVervollständigen - ( (dies.el.nativeElement), { Typen: ['geocode', 'Städte'] }); } }
Und einfache Winkel-Komponente:
<form [formGroup]="companyForm">
.
.
.
<div class="form-group">
<label for="Location">Location</label>
<input type="text"
class="form-control"
id="Location"
fromControlName="Location"
googleplaces>
</div>
</form>
Szenario 2 (eckig) nicht funktioniert. Die Fakten:
- AutoVervollständigen initialisiert wird (es hat alle erwarteten Eigenschaften/Methoden, wird der Platzhalter "Geben Sie eine Position an", etc...)
- AutoVervollständigen nicht wieder die Vorhersage für eingegebene such-string benutzen (es gibt nur "/**/xdc._le3zv3 && xdc._le3zv3( [4] )")
Auch die Google API-Konsole sagt, dass alles ist wie es sein sollte?! Hier ist der screenshot:
geben Sie eine Bild-Beschreibung hier
Was hier in Frage? Danke...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden
this.setAddress.emit(place);
imNgZone.run()
:constructor(private zone: NgZone, ..)
im Konstruktor, dannthis.zone.run(() => {this.setAddress.emit(place);})
im Ereignis-listener. Ohne es einige Modell-zu-UI-Ansicht die Synchronisierung wurde nicht ausgelöst@Habeeb ' s Antwort ist ein guter Anfang, aber das ist eine sauberere Umsetzung. Installieren Sie zuerst die googlemaps-Testungen
npm install --save-dev @types/googlemaps
und importieren Sie Sie irgendwo in Ihrem appimport {} from '@types/googlemaps'
.this.setAddress.emit(place);
imNgZone.run()
:constructor(private zone: NgZone, ..)
im Konstruktor, dannthis.zone.run(() => {this.setAddress.emit(place);})
im Ereignis-listener. Ohne es einige Modell-zu-UI-Ansicht die Synchronisierung wurde nicht ausgelöst