Ограничить результаты автозаполнения Google с помощью параметра границ - PullRequest
Новая
       48

Ограничить результаты автозаполнения Google с помощью параметра границ

0 голосов
/ 06 января 2020

Я пытаюсь использовать Google Places Autocomplete и ограничить результаты указанным c городом в Канаде, а именно Торонто. Мне известно, что использование опции 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.

Может кто-нибудь увидеть, что я могу делать неправильно?

1 Ответ

1 голос
/ 06 января 2020

Ваши northEast и southWest точки названы неправильно. Измените их имена: 

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

screenshot of southWest and northEast locations

Если я установлю их на: 

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

Объект границ правильный.

подтверждение концепции скрипта

screenshot with correct northEast/southWest naming

фрагмент кода: 

// 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>
...