Question

我在谷歌的自动完成位置服务方面遇到了一些问题。有两种不同的方法，这两种方法都会引发我的问题：

选项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方法预测很好。我有街道地址，城市，州，国家，但不是邮政编码。也许我应该在选择其中一个预测然后获取邮政编码信息后进行第二次调用？我没有任何来自谷歌的场景，然后通过

从地址获取邮政编码

选项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并且我可以访问道具/状态，但变量autocommpleten超出范围，因此我无法获取地址。

我对选项2的问题，第二部分，是我没有看到一种方法来访问addlistener方法中的状态。

我觉得我的选项1是最合理的解决方案，但出于某种原因，谷歌决定不包含邮政编码。另外，使用听众会让我感到不安。

Answer 1

我找到了一个更优雅的工作，并保留了使用父类'react-places-autocomplete'的能力在我的handleselect中，我添加了以下代码：

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

googlemapsclient = require（'@ google / maps'）。createClient（{ 关键：'...' }）;

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

React和Google的自动完成服务和提取zipcodes

1 个答案: