Laden von Google Places Autocomplete Async Angular 2

Ich versuche, eine Google Places Autocomplete-Eingabe innerhalb einer Angular 2-Komponente zu instanziieren. Ich benutze diesen Code, es zu tun:Laden von Google Places Autocomplete Async Angular 2

loadGoogle() { 
    let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] }); 
    let that = this 
    //add event listener to google autocomplete and capture address input 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     let place = autocomplete.getPlace(); 
     that.place = place; 
     that.placesearch = jQuery('#pac-input').val(); 
    }); 
    autocomplete.addListener() 
    }

Normalerweise glaube ich, wurde ich die Callback-Funktion von dem Google-API zur Verfügung gestellt, um sicherzustellen, dass es geladen wird, bevor diese Funktion ausgeführt wird, aber ich habe keinen Zugriff darauf innerhalb des Umfangs einer Komponente. Ich bin in der Lage, die zum automatischen Vervollständigung Eingang 90% der Zeit zu laden, aber auf langsameren Verbindungen I-Fehler manchmal heraus mit

google is not defined

Hat jemand herausgefunden, wie der Google-API, um sicherzustellen, innerhalb einer Komponente geladen, bevor die Instanziierung.

Quelle

2016-05-19 C. Kearns

Hallo C. Kearns, Welche API-Bibliothek verwenden Sie für Google Maps in eckigen 2? –

Google platziert die Autocomplete. Das Problem ist geblieben und muss noch eine angemessene Lösung finden. –

Ich habe es auf die gleiche Weise, wie oben erklärt, sondern als pro Google-Seite Geschwindigkeit ich diesen Vorschlag war immer,

Entfernen machen blockierungs JavaScript : http://maps.googleapis.com/ ... es = Geometrie, Orte & region = IN & language = en

Also änderte ich meine Implementierung

<body> 
    <app-root></app-root> 
    <script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places&region=IN&language=en" async></script> 
</body>

/* Jetzt in meinem component.ts */

triggerGoogleBasedFn(){ 
    let _this = this; 

    let interval = setInterval(() => { 
     if(window['google']){ 
     _this.getPlaces(); 
     clearInterval(interval); 
     } 
    },300) 
    }

Sie können noch etwas tun, emittieren Ereignisse, sobald der Wert (google) empfangen wird, & triggern Sie Ihre Google Aufgabe in ihnen.

Quelle

2016-11-03 11:25:16 Manish

Nicht sicher, ob dies helfen wird, aber ich verwende einfach ein einfaches Skript-Tag in meiner index.html, um Google API zu laden, und ich bekomme nie einen Fehler. Ich glaube, du machst das Gleiche auch. Ich poste meine Codes hier, hoffe, es hilft.

Hinweis: Ich verwende Webpack, um andere Skripts zu laden, außer Google Map API.

<html> 
    <head> 
    <base href="/"> 
    <title>Let's Go Holiday</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Google Map --> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script> 
    </head> 

    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

Und dann in der Komponente:

... 
declare var google: any; 

export class SearchBoxComponent implements OnInit { 

    ngOnInit() { 
    // Initialize the search box and autocomplete 
    let searchBox: any = document.getElementById('search-box'); 
    let options = { 
     types: [ 
     // return only geocoding results, rather than business results. 
     'geocode', 
     ], 
     componentRestrictions: { country: 'my' } 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(searchBox, options); 

    // Add listener to the place changed event 
    autocomplete.addListener('place_changed',() => { 
     let place = autocomplete.getPlace(); 
     let lat = place.geometry.location.lat(); 
     let lng = place.geometry.location.lng(); 
     let address = place.formatted_address; 
     this.placeChanged(lat, lng, address); 
    }); 
    } 
    ... 
}

Quelle

2016-05-19 09:21:29 Andyccs

Ich habe mein Skript-Tag unter der App, vielleicht ist das das Problem! –

Hallo @Andyccs, danke für deine Antwort, aber ich frage mich, was passiert, wenn wir mehr als ein Feld zur Eingabe verwenden? Wird es normal funktionieren? –

Laden von Google Places Autocomplete Async Angular 2

Antwort

Verwandte Themen