Reagieren und Google Autocomplete Service und Abrufen von Postleitzahlen

Question

Ich habe ein paar Probleme mit Google Autocomplete Location Service. Es gibt zwei verschiedene Ansätze, von denen beide mir zu Problemen führen:

Option 1 use ‚reagieren Plätze-Autocomplete‘ und Erweiterungen gelten, wenn notwendig:

handleInputChange(event) { 
    this.props.inputProps.onChange(event.target.value) 
    if (!event.target.value) { 
     this.clearAutocomplete() 
     return 
    } 
    this.autocompleteService.getPlacePredictions({ ...this.props.options, input: event.target.value }, this.autocompleteCallback) 
    } 

Die oben mit Prognosen meine autocompleteCallback Methode ruft die ist toll. Ich habe Straßenadresse, Stadt, Staat, Land, aber keine Postleitzahlen. Vielleicht sollte ich dann einen zweiten Anruf machen, nachdem ich eine der Vorhersagen gewählt habe, um dann die Postleitzahleninformationen zu holen? Ich habe keine Szene etwas von Google, die dann eine Postleitzahl aus einem adddress holen wird, obwohl

Option 2A:

method1(a1, a2, a3) { 
     //do state things because method1 is bound in the constructor 
    }; 
... later .... 
    var input = document.getElementById('my-input-id'); 
    var options = { 
     types: ['address'], 
     componentRestrictions: { 
      country: 'us' 
     } 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
    google.maps.event.addListener(autocomplete, 'place_changed', this.method1); 

Option 2B

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     place = autocomplete.getPlace(); 
     //call states 
    }) 

Meine Probleme mit Option 2 der erste Teil ist das, obwohl wir Methode 1 treffen und ich habe Zugriff auf Requisiten/Staaten, die Variable autocommpletten ist außerhalb des Geltungsbereichs, so kann ich die Adressen nicht erhalten.

Mein Problem mit Option 2, der zweite Teil, ist, dass ich keine Möglichkeit sehe, Zugriff auf den Zustand innerhalb einer Addlistener-Methode zu haben.

Ich fühle mich wie meine Option 1 ist die vernünftigste Lösung, aber aus irgendeinem Grund entschied sich Google, keine Postleitzahlen einzubeziehen. Darüber hinaus macht es mich unbehaglich, mit einem Zuhörer zu reagieren.

Answer 1

fand ich eine Arbeit, um die elegantere und bewahrt die Möglichkeit, die Elternklasse zu verwenden ‚reagieren Plätze-Autovervollständigung‘ in meinem handleselect, ich den folgenden Code hinzu:

googleMapsClient.geocode({ 
     address: address 
    }, this.method1); 

wo googlemapsclient = require ('@ google/maps'). createClient ({ Schlüssel: '...' });

Es ruft eine andere asynch Methode auf, die nicht ideal ist, aber es behält meine anderen Informationen bei.