Попытка загрузки Google мест автозаполнения 2 раза на одной странице - PullRequest
Новая
       11

Попытка загрузки Google мест автозаполнения 2 раза на одной странице

0 голосов
/ 03 ноября 2018

Я пытаюсь загрузить автозаполнение Google в двух местах на моей странице. Один в навигационной панели для поиска по сайту и второй для пользователя, чтобы создать событие, введя адрес. Я могу заставить одного или другого работать. И как только я начал работать, но тогда это не заполнило бы информацию. Я хотел бы знать, что я делаю неправильно, я уже несколько часов бьюсь головой об этом.

Мои данные 

<input class="form-control" id="autocomplete" type="text" placeholder="Search..." name="term">
and
 <input id="autocomplete2" placeholder="Enter address to store" type="text" autocomplete="off"></input>

и мой файл js 

var placeSearch, autocomplete;

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete() {

  autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
      types: ['geocode']
    });
  autocomplete.addListener('place_changed', addlatlong);

  autocomplete2 = new google.maps.places.Autocomplete(
    document.getElementById('autocomplete2'), {
     types: [ 'geocode' ] 
   });
  autocomplete.addListener('place_changed', fillInAddress);
}
function addlatlong() {

var place = autocomplete.getPlace();

var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();

document.getElementById("latitude").value = latitude;
document.getElementById("longitude").value = longitude;
}

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  var latitude = place.geometry.location.lat();
  var longitude = place.geometry.location.lng();


  document.getElementById("latbox").value = latitude;
  document.getElementById("lngbox").value = longitude;

  console.log(`${latitude}`)
  console.log(`${longitude}`)

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

1 Ответ

0 голосов
/ 03 ноября 2018

Ну, во-первых, давайте удостоверимся, что эти входы идентичны, кроме их идентификаторов.

Вот небольшой пример из моего старого проекта: 

    form style="width:300px;margin: 0 auto;" action="/instructions" method="POST"

        strong
          p.input-label I'm currently at...

        input style="width:300px;" id="autocomplete" placeholder="Enter your current address" onFocus="geolocate()" type="text" name="current_address" required="required"

        strong
          p.input-label And I need to get to...

        input style="width:300px;" id="autocomplete2" placeholder="Enter your destination address" onFocus="geolocate()" type="text" name="destination_address" required="required"


        input.button style="width:300px;" type="submit" value="What's the plan?"

Ваши входные данные, которыми вы поделились, имеют разные поля, некоторые из которых отсутствуют в других и т. Д. Первым шагом следует сделать их идентичными во всех возможных случаях, а затем постепенно переводить одно из них в желаемое состояние.

Я вижу, что вы тоже используете старую версию javascript. Если возможно, вы можете рассмотреть возможность рефакторинга в es5 +

В верхней части вы объявляете placeSearch и autocomplete, но не autocomplete2. Это еще один пример того, что я предлагал ранее, о прохождении вашего кода и обеспечении того, чтобы оба ввода обрабатывались / создавались одинаково.

Я вижу, initAutocomplete объявлен, но никогда не запускается. Это намеренно? Модуль google автоматически вызывает эту функцию?

Мне кажется, что addlatlong() и fillInAddress() - это две функции, которые вы намереваетесь использовать, одна для autocomplete, а другая для autocomplete2, но вы ссылаетесь на autocomplete в обеих из них.

В общем, я думаю, что вы так много работали с кодом, чтобы попытаться заставить его работать, что вы потеряли из виду, как он должен быть написан в конце.

Возможно, лучший способ выяснить, как решить эту проблему, - это начать новый файл, обновлять его и делать по одному маленькому шагу за раз.

Получите один ввод, работающий полностью, как и ожидалось, а затем добавьте следующий шаг за шагом, так же, как вы реализовали первый.

Удачи!

...