Пользовательский адрес для окна поиска автозаполнения Google - PullRequest
0 голосов
/ 18 февраля 2020

У меня на сайте есть автозаполнение (Places Autocomplete by Google), которое работает нормально и ограничено моими границами. Но есть некоторые местоположения, которые отсутствуют, когда кто-то вводит его в поле поиска, даже если эти местоположения действительно существуют в реальных Картах Google. Ниже приведена реализация javascript для автозаполнения.

function initAutocomplete(){
      var areaboundary = new google.maps.LatLngBounds(
          new google.maps.LatLng(51.377809, -3.508688),
          new google.maps.LatLng(51.628119, -2.954925)
      );


  var options = {
    bounds: areaboundary,
    strictBounds: true,
    types: ['geocode'],
    componentRestrictions: {country: 'uk'}
  };
  var input = document.getElementById('property-location');
  autocomplete = new google.maps.places.Autocomplete(input, options);



  autocomplete.addListener('place_changed', function(){
    var place = autocomplete.getPlace();

    if(place.length === 0){
      return;
    }

    if(place.formatted_address == "Cardiff, UK"){
      jQuery("#property-radius-sale option[value=5]").prop("selected", true);
      jQuery("#property-radius-rent option[value=5]").prop("selected", true);
    }

    var lat = place.geometry.location.lat();
    var lng = place.geometry.location.lng();
    var coordinates = [lat, lng];

    var hidden_input = document.getElementById("lat-lng-location");
    hidden_input.value = coordinates;
  });
}

Местоположение, которое я пытаюсь добавить, является следующим:

Местоположение, которое будет добавлено

Причина, по которой мне нужен этот конкретный c адрес, заключается в том, что адреса, которые появляются на сайте, также включают Кардифф-Бэй.

Мой вопрос: как можно добавить пользовательский адрес / местоположение? с lng и lat для автозаполнения мест?

1 Ответ

0 голосов
/ 18 февраля 2020

Указанная проблема c, связанная с Cardiff Bay, UK, вызвана параметром types. Место считается естественной особенностью и не возвращается API, если вы указали тип geocode.

Он будет указан, хотя, если вы не укажете тип или не используете types: ['geocode', 'establishment'], который в соответствии с документами идентичен отсутствию типа.

function initialize() {

  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      componentRestrictions: {
        country: 'uk'
      }
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {
      // 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;
    }

    var html = '<div>Latitude: ' + place.geometry.location.lat() + '</div>';
    html += '<div>Longitude: ' + place.geometry.location.lng() + '</div>';

    document.getElementById('geometry').innerHTML = html;
  });
}
body,
html {
  padding: 10px;
}

#autocomplete {
  width: 400px;
}

#geometry {
  margin-top: 10px;
  background: lightblue;
  padding: 10px 20px;
}
<input id="autocomplete" value="Cardiff Bay" type="text">
<div id="geometry">

</div>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initialize">
</script>
...