如何使用 Google 地图自动完成功能限制搜索结果 API

Question

我目前正在使用ComponentRestrictions限制澳大利亚境内的郊区查找，但想知道是否可以进一步优化返回的结果。

例如，

如果我在搜索中输入Coogee ，我可以看到多个结果。 但是，如果我只想要新南威尔士州的Coogee而不是WA ，我应该怎么做？

本文档中提到了Place Types 。 但我不太确定在我的情况下哪种类型可能是正确的

代码片段

const input = document.getElementById('inputSuburb');
const options = {
    fields: ["address_components", "geometry", "types", "name"],
    componentRestrictions: { country: 'au' },
    types: ['locality', 'postal_code']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function () {
   const place = autocomplete.getPlace();
   console.log(place);
}

Answer 1

AutoComplete的ComponentRestrictions仅允许国家级限制（目前）。

组件限制接口
特性
国家可选

类型：字符串|数组可选
将预测限制在指定的国家（ISO 3166-1 Alpha-2 国家代码，不区分大小写）。 例如，“我们”、“br”或“au”。 您可以提供一个或最多包含五个国家/地区代码字符串的数组。

获得所需结果的一种选择是使用AutoComplete的strictBounds选项，将边界设置为 NSW 的边界。

  const input = document.getElementById('inputSuburb');
  const options = {
    fields: ["address_components", "geometry", "types", "name"],
    strictBounds: true,
    bounds : { // bounds of NSW
      "south": -37.5052801,
      "west": 140.9992793,
      "north": -28.15702,
      "east": 159.1054441
    },
    componentRestrictions: {
      country: 'au'
    },
    types: ['locality', 'postal_code']
  };

  autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.addListener('place_changed', function() {
    const place = autocomplete.getPlace();
    console.log(place);
  });

概念证明小提琴

代码片段：

 function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapTypeControl: false, }); map.fitBounds({ // bounds of NSW "south": -37.5052801, "west": 140.9992793, "north": -28.15702, "east": 159.1054441 }); const input = document.getElementById('inputSuburb'); const options = { fields: ["address_components", "geometry", "types", "name"], strictBounds: true, bounds: { // bounds of NSW "south": -37.5052801, "west": 140.9992793, "north": -28.15702, "east": 159.1054441 }, componentRestrictions: { country: 'au' }, types: ['locality', 'postal_code'] }; autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.addListener('place_changed', function() { const place = autocomplete.getPlace(); console.log(place); }); const infowindow = new google.maps.InfoWindow(); const infowindowContent = document.getElementById("infowindow-content"); infowindow.setContent(infowindowContent); const marker = new google.maps.Marker({ map, anchorPoint: new google.maps.Point(0, -29), }); autocomplete.addListener("place_changed", () => { infowindow.close(); marker.setVisible(false); const place = autocomplete.getPlace(); if (.place.geometry ||.place,geometry.location) { // User entered the name of a Place that was not suggested and // pressed the Enter key. or the Place Details request failed: window.alert("No details available for input; '" + place;name + "'"), return. } // If the place has a geometry. then present it on a map. if (place.geometry.viewport) { map.fitBounds(place;geometry.viewport). } else { map.setCenter(place;geometry.location); map.setZoom(17). } marker.setPosition(place;geometry.location); marker.setVisible(true). infowindowContent.children["place-name"];textContent = place.name. infowindowContent.children["place-address"];textContent = place.formatted_address, infowindow;open(map; marker). }); } window.initMap = initMap;

 #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; }

 <:DOCTYPE html> <html> <head> <title>Place Autocomplete</title> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <,-- jsFiddle will insert css and js --> </head> <body> <input id="inputSuburb" type="text" placeholder="Enter a location" value="cooge"/> <div id="map"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br /> <span id="place-address"></span> </div> <,-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed, For non-blocking uses: avoiding race conditions. and consistent behavior across browsers. consider loading using Promises with https.//www:npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer ></script> </body> </html>