将自动填充 Google 限制在特定的行政区域

Question

我想将 Google Maps Api 的自动完成功能限制在特定区域。 我找到了一个解决方案，但它并不完美。

• 如何停用自动完成的“keyup”事件或删除预测？在解决方案中，我添加了一个删除预测的 setTimeOut 函数，但如果可能的话，我想要另一个解决方案。

• 我需要在街道名称后放置一个空格来显示预测。

欢迎任何帮助！ 谢谢

**

代码

let autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {
  types: ['geocode'],
  componentRestrictions: { country: 'fr' }
});

let input = document.getElementById('autocompleteInput');
let inputValue = (<HTMLInputElement>document.getElementById('autocompleteInput'));
let help = document.getElementsByClassName('pac-container');


google.maps.event.addDomListener(input, 'keyup', function (e) {
  if (this.value !== '') {
    let valueup = help.item(0).childElementCount - 1;
    if (this.value.length > 1) {
      for (let i = valueup; i <= valueup && i >= 0; i--) {
        help.item(0).children.item(i).remove();
      }
    }

    let placesugges = function (placeresult, status) {

      if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (let i = 0; i < placeresult[0].address_components.length; i++) {
          let element = placeresult[0].address_components[i];
          if (element.types[0] === 'administrative_area_level_1' && element.short_name === 'Île-de-France') {

            let tes = document.getElementsByClassName('pac-container');
            let divtest = document.createElement('div');
            divtest.className = 'pac-item test';
            divtest.innerHTML = '<span class="pac-icon pac-icon-marker"></span><span class="pac-item-query" >'
                                + '<span class="pac-matched"></span>' + placeresult[0].formatted_address + '</span>';
            tes.item(0).appendChild(divtest);

            divtest.onmousedown = function () {
              inputValue.value = placeresult[0].formatted_address;
              google.maps.event.trigger(autocomplete, 'place_changed', placeresult);
            };
          }
        }
      }
    };

    let displaySuggestions = function (predictions, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        predictions.forEach(function (prediction) {
          let test = new google.maps.Geocoder();
          test.geocode({ 'placeId': prediction.place_id }, placesugges);
        });
      }
    };

    let service = new google.maps.places.AutocompleteService();
    let request = {
      input: this.value,
      componentRestrictions: { country: 'fr' },
      types: ['geocode']
    };
    service.getPlacePredictions(request, displaySuggestions);

    setTimeout(function () {
      let valueup = help.item(0).childElementCount - 1;
      for (let i = valueup; i <= valueup && i >= 0; i--) {
        if (autocomplete.gm_accessors_.place.Ac.gm_accessors_.input.Ac.D.children[i].className === 'pac-item') {
          autocomplete.gm_accessors_.place.Ac.gm_accessors_.input.Ac.D.children[i].remove();
        }
      }
    }, 300);
  }
});

**

Answer 1

目前这是不可能的，但有 2 个您可能感兴趣的功能请求：

• Issue 4433：允许 componentRestrictions 过滤与地理编码 API 服务相同的组件
• Issue 8606：地点自动完成：边界限制