2013-12-06 1 views
10

Я ищу для включения двух экземпляров Google Адресов на одной странице. Глядя на настройку входа для местоположения перехвата и ввода для местоположения отсечки.Добавление нескольких экземпляров в Google Местах на той же странице

Я предполагаю, что это связано с идентификатором элемента ввода, но даже когда я изменил его на класс, он все еще не работал.

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

Любая помощь очень ценится!

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
<script type="text/javascript"> 
    var placeSearch,autocomplete; 
    function initialize() { 
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] }); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     fillInAddress(); 
    }); 
    } 
    function fillInAddress() { 
    var place = autocomplete.getPlace(); 

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

    for (var j = 0; j < place.address_components.length; j++) { 
     var att = place.address_components[j].types[0]; 
     if (component_form[att]) { 
     var val = place.address_components[j][component_form[att]]; 
     document.getElementById(att).value = val; 
     } 
    } 
    } 
</script> 

HTML

<body onload="initialize()"> 
<form action="" method="post" name="theform" id="theform"> 
    <label>Pickup Location</label> 
    <input type="text" name="PickupLocation" onfocus="geolocate()" placeholder="Enter your pickup location" id="autocomplete" autocomplete="off" /> 

    <label>Dropoff Location</label> 
    <input type="text" name="DropoffLocation" onfocus="geolocate()" placeholder="Enter your dropoff location" id="autocomplete2" autocomplete="off" /> 
</form> 
</body> 

ответ

11

Это просто проблема.
Вы используете два идентификатора «автозаполнение» и «автозаполнение2»
, но инициализировали только идентификатор «автозаполнение».
Попробуйте добавить этот код в initialize().

Javascript

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

Ах, такая глупая вещь, которую я пропустил! Это отлично работает, спасибо! –

+5

Это должно быть более динамичным ... –

7

Вот мое решение, но нуждается в JQuery

var autocomplete = {}; 
 
\t \t var autocompletesWraps = ['test', 'test2']; 
 

 
\t \t var test_form = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; 
 
\t \t var test2_form = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; 
 

 
\t \t function initialize() { 
 

 
\t \t \t $.each(autocompletesWraps, function(index, name) { 
 
\t \t \t 
 
\t \t \t \t if($('#'+name).length == 0) { 
 
\t \t \t \t \t return; 
 
\t \t \t \t } 
 

 
\t \t \t \t autocomplete[name] = new google.maps.places.Autocomplete($('#'+name+' .autocomplete')[0], { types: ['geocode'] }); 
 
\t \t \t \t \t 
 
\t \t \t \t google.maps.event.addListener(autocomplete[name], 'place_changed', function() { 
 
\t \t \t \t \t 
 
\t \t \t \t \t var place = autocomplete[name].getPlace(); 
 
\t \t \t \t \t var form = eval(name+'_form'); 
 

 
\t \t \t \t \t for (var component in form) { 
 
\t \t \t \t \t \t $('#'+name+' .'+component).val(''); 
 
\t \t \t \t \t \t $('#'+name+' .'+component).attr('disabled', false); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t \t for (var i = 0; i < place.address_components.length; i++) { 
 
\t \t \t \t \t \t var addressType = place.address_components[i].types[0]; 
 
\t \t \t \t \t \t if (typeof form[addressType] !== 'undefined') { 
 
\t \t \t \t \t \t var val = place.address_components[i][form[addressType]]; 
 
\t \t \t \t \t \t $('#'+name+' .'+addressType).val(val); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t }
html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
\t #locationField, #controls { 
 
     position: relative; 
 
     width: 480px; 
 
     } 
 
     #autocomplete { 
 
     position: absolute; 
 
     top: 0px; 
 
     left: 0px; 
 
     width: 99%; 
 
     } 
 
     .label { 
 
     text-align: right; 
 
     font-weight: bold; 
 
     width: 100px; 
 
     color: #303030; 
 
     } 
 
     table { 
 
     border: 1px solid #000090; 
 
     background-color: #f0f0ff; 
 
     width: 480px; 
 
     padding-right: 2px; 
 
     } 
 
     table td { 
 
     font-size: 10pt; 
 
     } 
 
     .field { 
 
     width: 99%; 
 
     } 
 
     .slimField { 
 
     width: 80px; 
 
     } 
 
     .wideField { 
 
     width: 200px; 
 
     } 
 
     #locationField { 
 
     height: 20px; 
 
     margin-bottom: 2px; 
 
     }
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Place Autocomplete Address Form</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
\t <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
 
    </head> 
 

 
    <body onload="initialize()"> 
 
    
 
    <div id="test"> 
 
    
 
    <input class="autocomplete" placeholder="Enter your address" type="text"></input> 
 

 
    <table> 
 
     <tr> 
 
     <td class="label">Street address</td> 
 
     <td class="slimField"><input class="field street_number" disabled="true"></input></td> 
 
     <td class="wideField" colspan="2"><input class="field route" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"><input class="field locality" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"><input class="field administrative_area_level_1" disabled="true"></input></td> 
 
     <td class="label">Zip code</td> 
 
     <td class="wideField"><input class="field postal_code" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"><input class="field country" disabled="true"></input></td> 
 
     </tr> 
 
    </table> 
 
</div> 
 

 
<br /><br /> 
 
\t 
 
<div id="test2"> \t 
 
\t 
 
    <input class="autocomplete" placeholder="Enter your address" type="text"></input> 
 
    
 
\t <table> 
 
     <tr> 
 
     <td class="label">Street address</td> 
 
     <td class="slimField"><input class="field street_number" disabled="true"></input></td> 
 
     <td class="wideField" colspan="2"><input class="field route" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">City</td> 
 
     <td class="wideField" colspan="3"><input class="field locality" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">State</td> 
 
     <td class="slimField"><input class="field administrative_area_level_1" disabled="true"></input></td> 
 
     <td class="label">Zip code</td> 
 
     <td class="wideField"><input class="field postal_code" disabled="true"></input></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="label">Country</td> 
 
     <td class="wideField" colspan="3"><input class="field country" disabled="true"></input></td> 
 
     </tr> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

+0

Вы только что спасли мне жизнь с этим ответом –

0

Это решение работает, но есть одна проблема:

var theFields = ['field1','field2','field3','field4']; 
function initialize() { 
// Create the autocomplete object, restricting the search 
// to geographical location types. 
for (i=0;i<cityFields.length; i++){ 

     autocomplete = new google.maps.places.Autocomplete((document.getElementById(cityFields[i])), 
    { types: ['geocode'] }) 
    } 

// When the user selects an address from the dropdown, 
// populate the address fields in the form. 
google.maps.event.addListener(autocomplete, 'place_changed', function() { 
fillInAddress(); 
}); 
} 

Единственная проблема для этого, хотя в том, что поле2 не загрузит скрипт, если поле1 не существует на странице. Например, как в моем случае, первые 2 поля существуют на одной странице, другие 2 существуют на другой, но сценарий добавляется к заголовку (WordPress заголовка) ...

-2
function initialize() { 

     autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), 

      { types: ['geocode'], componentRestrictions:countryRestrict }); 


     google.maps.event.addListener(autocomplete, 'place_changed', function() { 

     fillInAddress(); 

     }); 

     autocomplete2 = new 

    google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { 
    types: [ 'geocode' ] }); 

     google.maps.event.addListener(autocomplete2, 'place_changed', function() { 

     fillInAddress(); 

     }); 


} 
+0

Отредактируйте свой ответ и исправьте форматирование своего кода. Вот подробные сведения об использовании Markdown: http://meta.stackexchange.com/help/formatting –

0

> Этот код работает на меня. Попробуйте и дайте мне знать.

// This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

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

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

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

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

autocomplete2 = new google.maps.places.Autocomplete(
     /** @type {!HTMLInputElement} */(document.getElementById('autolocation2')), 
     {types: ['geocode']});  

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

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; 
    } 

    // 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; 
    } 
    } 
} 

function fillInAddress2() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete2.getPlace(); 

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

    // 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; 
    } 
    } 
} 

// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 
     var circle = new google.maps.Circle({ 
     center: geolocation, 
     radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
    }); 
    } 
} 
+1

Почти работал для меня, но результат поиска из обоих полей отображается в форме 1. –

3

Более динамичный подход. Вам не нужно инициализировать идентификаторы элементов.

var inputs = document.getElementsByClassName('query'); 
 

 
var options = { 
 
    types: ['(cities)'], 
 
    componentRestrictions: {country: 'fr'} 
 
}; 
 

 
var autocompletes = []; 
 

 
for (var i = 0; i < inputs.length; i++) { 
 
    var autocomplete = new google.maps.places.Autocomplete(inputs[i], options); 
 
    autocomplete.inputId = inputs[i].id; 
 
    autocomplete.addListener('place_changed', fillIn); 
 
    autocompletes.push(autocomplete); 
 
} 
 

 
function fillIn() { 
 
    console.log(this.inputId); 
 
    var place = this.getPlace(); 
 
    console.log(place. address_components[0].long_name); 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
 

 
<input id="query-0" class="query" type="text"/> 
 
<input id="query-1" class="query" type="text"/> 
 
<input id="query-2" class="query" type="text"/>

0

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

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

<div id="<?php if(isset($postcode_context) && $postcode_context == "collection") { echo "collections-autocomplete-fields";} else {echo "autocomplete-fields";}?>" class="new-address-fields"> 
    <div class="fields"> 
    <div class="row form-group"> 
     <div class="col-xs-12 col-sm-6"> 
      <label for="Address1">Building Number/Name *</label> 
      <input type="text" class="form-control field" name="Address1" id="street_number"> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <label for="Address2">Address line 1 *</label> 
      <input type="text" class="form-control field" name="Address2" id="route"> 
     </div> 
    </div> 
    <div class="row form-group"> 
     <div class="col-xs-12 col-sm-6"> 
      <label for="Address2">Address line 2</label> 
      <input type="text" class="form-control field" name="Address2" id="route_two"> 
     </div> 
     <div class="col-xs-12 col-sm-6"> 
      <label for="Town">Town *</label> 
      <input type="text" class="form-control field" name="Town" id="locality"> 
     </div> 
    </div> 
    <div class="row form-group"> 
     <div class="col-xs-12 col-sm-6"> 
      <label for="County">County</label> 
      <input type="text" class="form-control field" name="County" id="administrative_area_level_1"> 
     </div> 
     <div class="col-xs-12 col-sm-6 wideField"> 
      <label for="Postcode">Postcode *</label> 
      <input type="text" class="form-control field" name="Postcode" id="postal_code"> 
     </div> 
    </div> 
    <div class="row form-group"> 
     <div class="col-xs-12 col-sm-6 wideField"> 
      <label for="Country">Country *</label> 
      <input type="text" class="form-control field" name="Postcode" id="country"> 
     </div> 
    </div> 
</div> 

С JQuery следующим образом:

googlePlaces: function ($context) { 
     var placeSearch, autocomplete; 
     var componentForm = { 
      street_number: 'short_name', 
      route: 'long_name', 
      locality: 'long_name', 
      administrative_area_level_1: 'long_name', 
      country: 'long_name', 
      postal_code: 'short_name' 
     }; 

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

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

      autocomplete2 = new google.maps.places.Autocomplete(
       /** @type {!HTMLInputElement} */ 
       (document.getElementById('collections-autocomplete')), { 
        types: ['geocode'], 
        componentRestrictions: { 
         country: ['UK'] 
        } 
       }); 

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

     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; 
      } 

      // 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; 
       } 
      } 
     } 

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

      // 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 (componentForm2[addressType]) { 
        var val = place.address_components[i][componentForm2[addressType]]; 
        $('#collections-autocomplete-fields #' + addressType).val(val); 
       } 
      } 
     } 

     // Bias the autocomplete object to the user's geographical location, 
     // as supplied by the browser's 'navigator.geolocation' object. 
     function geolocate() { 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        var geolocation = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 
        var circle = new google.maps.Circle({ 
         center: geolocation, 
         radius: position.coords.accuracy 
        }); 
        autocomplete.setBounds(circle.getBounds()); 
       }); 
      } 
     } 
     google.maps.event.addDomListener(window, 'load', initAutocomplete); 
    } 

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