Как изменить данные формы URL автозаполнения google places

Я настроил автозаполнение Google places и после выбора поиска получаю данные формы URL следующим образом: http://127.0.0.1:8000/location/?term=1+York+Street%2C+Sydney+NSW%2C+Australia. Я хотел бы настроить его так, чтобы он возвращал несколько пар имя/значение, например: http://127.0.0.1:8000/location/?inputNumber=1&inputStreet=York+Street&inputCity=Sydney&inputState=NSW&inputZip=2000

Это необходимо, поскольку я использую Django и хотел бы использовать пары имя/значение для получения данных из модели.

Вот что я настроил в тегах моего скрипта:

<script>
    function initMap() {
      var input = document.getElementById('search_term');
      const options = { types: ["address"], };
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.setComponentRestrictions({ country: ["au"], });
    }
  </script>
  <script async
    src="https://maps.googleapis.com/maps/api/js?key=xxxxxx&libraries=places&callback=initMap">
  </script>

Любая помощь будет признательна?

Чтобы заставить автозаполнение Google Places возвращать несколько пар имя/значение в URL, вы можете модифицировать функцию initMap для извлечения отдельных компонентов выбранного адреса и добавить их в качестве параметров запроса в URL.

Вот пример того, как вы можете это сделать:

function initMap() {
  // Get the search term input element
  var input = document.getElementById('search_term');

  // Set the autocomplete options
  const options = { types: ["address"], };

  // Create the autocomplete object
  var autocomplete = new google.maps.places.Autocomplete(input);

  // Set the country restrictions
  autocomplete.setComponentRestrictions({ country: ["au"], });

  // Add a listener to the place_changed event to extract the address components
  // and add them as query parameters to the URL
  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    var url = '/location/';
    var queryParams = [];

    // Iterate through the address components and add them as query parameters
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      var shortName = place.address_components[i].short_name;
      if (addressType == 'street_number') {
        queryParams.push('inputNumber=' + shortName);
      } else if (addressType == 'route') {
        queryParams.push('inputStreet=' + shortName);
      } else if (addressType == 'locality') {
        queryParams.push('inputCity=' + shortName);
      } else if (addressType == 'administrative_area_level_1') {
        queryParams.push('inputState=' + shortName);
      } else if (addressType == 'postal_code') {
        queryParams.push('inputZip=' + shortName);
      }
    }

    // Add the query parameters to the URL
    if (queryParams.length > 0) {
      url += '?' + queryParams.join('&');
    }

    // Navigate to the URL
    window.location.href = url;
  });
}

Этот код устанавливает слушателя для события place_changed объекта autocomplete, которое срабатывает, когда пользователь выбирает место из списка autocomplete. Когда событие срабатывает, код извлекает отдельные компоненты адреса из объекта place и добавляет их в качестве параметров запроса в URL. Затем осуществляется переход к URL с помощью свойства window.location.href.

Служба Place Autocomplete - это веб-служба, которая возвращает предсказания места в ответ на HTTP-запрос. В запросе указывается текстовая строка поиска и необязательные географические границы. Сервис может использоваться для обеспечения функциональности автозаполнения для текстового географического поиска, возвращая такие места, как предприятия, адреса и достопримечательности, по мере того, как пользователь набирает текст.

Вернуться на верх