API Адрес автозаполнения Google Place вызывает автозаполнение HTML = Выкл. - PullRequest
Новая
       46

API Адрес автозаполнения Google Place вызывает автозаполнение HTML = Выкл.

0 голосов
/ 10 октября 2018

У нас есть стандартная форма для адреса (улица 1, улица 2, город, штат, почтовый индекс, страна).

Когда я добавляю код для API автозаполнения Google Адресов на улице 1, он автоматически меняет вводпри загрузке страницы отключается автоматическое заполнение полей, из-за чего автозаполнения HTML / браузера не работают на улице 1. 

<input autocomplete="address-line1" type = "text" name = "shipping_address_1" id = "shipping_address_1"   class="ct-required form-control" tabindex=7>

Любые идеи о том, как это исправить;почему API Google Place Autcomplete меняет поле на autocomplete='off'?

Я пытался изменить переменную javascript Google «autocomplete» на «autocomp», думая, что это как-то связано с этим, но все еще тот же результат. 

      var placeSearch, autocomp;
  var componentForm = {
    shipping_address_1: 'short_name',
    shipping_address_2: 'long_name',
    shipping_city: 'long_name',
    shipping_state: 'short_name',
    shipping_country: 'long_name',
    shipping_zip: 'short_name'
  };



  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomp = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('shipping_address_1')),
        {
            types: ['geocode'],
            componentRestrictions: {country: "us"}
        });

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomp.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomp.getPlace();
    //debug autofillinplaes
    console.log(place);


    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

if (place.address_components) {
    // Get each component of the address from the place details
    // and fill the corresponding field on the form.

    var components_by_type = {};

    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      var c = place.address_components[i];
      components_by_type[c.types[0]] = c;

    }
     var streetnumb = components_by_type['street_number'].short_name;

          var address1 = streetnumb+" "+components_by_type['route'].long_name;
            document.getElementById('shipping_address_1').value = address1;

         var locality = components_by_type['locality'].long_name;     
        document.getElementById('shipping_city').value = locality;

         var administrative_area_level_1 = components_by_type['administrative_area_level_1'].short_name;      
        document.getElementById('shipping_state').value = administrative_area_level_1;

          var country = components_by_type['country'].short_name;             
        document.getElementById('shipping_country').value = country;

          var postal_code = components_by_type['postal_code'].short_name;         
        document.getElementById('shipping_zip').value = postal_code;
... [DO ADDRESS VALIDATION, UPDATE INPUT FIELDS] ...}

Ответы [ 2 ]

0 голосов
/ 22 октября 2018 
autocomp = new google.maps.places.Autocomplete(
document.getElementById('shipping_address_1')),
        {
            types: ['geocode'],
            componentRestrictions: {country: "us"}
        });

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

, если вы хотите, чтобы она была такой,используйте API-интерфейс WebService, отправляйте HTTP-запросы и заполняйте поля его ответом.

Из документов: запрос заведений, содержащих строку «Amoeba», в пределах центра, расположенного в Сан-Франциско, Калифорния: https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Amoeba&types=establishment&location=37.76999,-122.44696&strictbounds&key=YOUR_API_KEY AЗапрос GET на указанный выше URL с параметрами запроса input=Paris&types=geocode даст объект JSON, содержащий прогнозы. 

{
  "status": "OK",
  "predictions" : [
      {
         "description" : "Paris, France",
         "id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
         "matched_substrings" : [
            {
               "length" : 5,
               "offset" : 0
            }
         ],
    ... more results
    ]
}
0 голосов
/ 22 октября 2018

Пожалуйста, обратитесь к документации здесь .

Вам необходимо использовать либо карту Google, либо логотип Google.

Также посмотрите этот ответ .

...