React 和 Google 的自动完成服务和获取邮政编码

Question

我在使用 google 的自动完成位置服务时遇到了一些问题。有两种不同的方法，这两种方法都会导致我遇到问题：

选项 1 使用 'react-places-autocomplete' 并在必要时应用扩展：

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

上面调用了我的带有预测的 autocompleteCallback 方法，这很棒。我有街道地址、城市、州、国家，但没有邮政编码。也许我应该在选择其中一个预测之后进行第二次调用，然后获取邮政编码信息？我还没有从 google 中找到任何可以从地址获取邮政编码的东西

选项 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);

选项 2B

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

我对选项 2 的问题第一部分是，虽然我们使用了方法 1 并且我可以访问 props/states，但变量 autocommpleten 超出了范围，所以我无法获取地址。

我对选项 2（第二部分）的问题是，我看不到在 addlistener 方法中访问状态的方法。

我觉得我的选项 1 是最合理的解决方案，但出于某种原因，google 决定不包括邮政编码。此外，使用监听器让我在反应中感到不安。

Answer 1

我找到了一个更优雅并保留使用父级的能力的变通方法 class 'react-places-autocomplete' 在我的 handleselect 中，我添加以下代码：

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

其中 googlemapsclient = require('@google/maps').createClient({ 钥匙： '...' });

它调用了另一个不理想的异步方法，但它保留了我的其他信息。

React 和 Google 的自动完成服务和获取邮政编码

React and Google's autocomplete Service and fetching zipcodes

reactjs

google-places