使用边界选项限制 Google 自动完成结果

Question

我正在尝试使用 Google 地点自动完成功能并将结果限制在加拿大的特定城市，即多伦多。我知道使用 componentRestrictions 选项将允许我使用 componentRestrictions: {country: 'CA'} 将结果限制为加拿大。为了进一步将结果限制在多伦多，我知道我必须将 bounds 属性添加到 options 对象。 LatLngBounds 需要西南角和东北角，也称为左下角和右上角。

我找到了这个示例代码，它为巴基斯坦的海得拉巴市实施了这个策略，并且运行良好：

var input = document.getElementById('searchTextField');
var southWest = new google.maps.LatLng( 25.341233, 68.289986 );
var northEast = new google.maps.LatLng( 25.450715, 68.428345 );
var HyderabadBounds = new google.maps.LatLngBounds( southWest, northEast );

var options = {
    bounds: HyderabadBounds,
    types:  ['address'],
    componentRestrictions: { country: 'PK' }
};

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

当我尝试修改代码以适用于加拿大的某个地区时，由于某种原因它不起作用。这是我修改后的代码：

var input = document.getElementById('searchTextField');
var southWest = new google.maps.LatLng( 43.941160, -78.895187 );
var northEast = new google.maps.LatLng( 42.946172, -81.296577 );
var TorontoBounds = new google.maps.LatLngBounds( southWest, northEast );

var options = {
    bounds: TorontoBounds,
    types:  ['address'],
    componentRestrictions: { country: 'CA' }
};

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

我修改后的代码唯一不同的是国家名称 CA 和我认为正确的 LatLng 坐标。我仔细检查了我的坐标，西南坐标指的是多伦多西南部的位置，东北坐标指的是多伦多东北部的位置，所以我希望这些应该有效。虽然我的结果适当地限制在加拿大，但它们不在 LatLng 坐标指定的范围内。

谁能看出我做错了什么？

Answer 1

您的 northEast 和 southWest 点命名不正确。更改他们的名字：

var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);

如果我将它们设置为：

var northEast = new google.maps.LatLng(43.941160, -78.895187);
var southWest = new google.maps.LatLng(42.946172, -81.296577);

边界对象正确。

proof of concept fiddle

代码片段：

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });
  var input = document.getElementById('searchTextField');
  var northEast = new google.maps.LatLng(43.941160, -78.895187);
  var southWest = new google.maps.LatLng(42.946172, -81.296577);

  var SWmark = new google.maps.Marker({
    map: map,
    position: southWest,
    title: southWest.toUrlValue(6),
    label: "SW"
  });
  var NEmark = new google.maps.Marker({
    map: map,
    position: northEast,
    title: northEast.toUrlValue(6),
    label: "NE"
  });
  var TorontoBounds = new google.maps.LatLngBounds(southWest, northEast);
  var rectangle = new google.maps.Rectangle({
    map: map,
    bounds: TorontoBounds
  });
  map.fitBounds(TorontoBounds);
  var options = {
    bounds: TorontoBounds,
    types: ['address'],
    componentRestrictions: {
      country: 'CA'
    }
  };

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

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

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

<div id="pac-container">
  <input id="searchTextField" type="text" placeholder="Enter a location">
</div>
<div id="map"></div>
<div id="infowindow-content">
  <img src="" width="16" height="16" id="place-icon">
  <span id="place-name" class="title"></span><br>
  <span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

使用边界选项限制 Google 自动完成结果

Restrict Google Autocomplete results using bounds option

google-maps

google-maps-api-3

autocomplete

google-places-api