Javascript 谷歌地图API自动完成同一页面上的第二个地址字段
我在我的页面上使用谷歌地图API,页面要求用户填写你的“当前地址”和“新地址” 我可以让autocomplete在第一个地址上运行,但在第二个地址上不起作用。我做了很多研究,并查看了stackoverflow上的类似帖子,但我找不到有同样问题的人 这是我的密码Javascript 谷歌地图API自动完成同一页面上的第二个地址字段,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我在我的页面上使用谷歌地图API,页面要求用户填写你的“当前地址”和“新地址” 我可以让autocomplete在第一个地址上运行,但在第二个地址上不起作用。我做了很多研究,并查看了stackoverflow上的类似帖子,但我找不到有同样问题的人 这是我的密码 <div id="locationField"> <input id="autocomplete" placeholder="Start typing your address" onFocus="geoloca
<div id="locationField">
<input id="autocomplete" placeholder="Start typing your address" onFocus="geolocate()" type="text"></input>
</div>
<div id="addressone">
<input type="text" id="street_number" name="street_number"></input>
<input type="text" id="route" name="street_name"></input>
<input type="text" id="locality" name="town_city"></input>
<input type="text" id="postal_code" name="postcode"></input>
<input type="text" id="country" name="country"></input>
</div>
<div id="locationField2">
<input id="autocomplete2" placeholder="Start typing your address" onFocus="geolocate()" type="text"></input>
</div>
<div id="addresstwo">
<input type="text" id="street_number2" name="street_number2"></input>
<input type="text" id="route2" name="street_name2"></input>
<input type="text" id="locality2" name="town_city2"></input>
<input type="text" id="postal_code2" name="postcode2"></input>
<input type="text" id="country2" name="country2"></input>
</div>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
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() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
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;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// 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());
});
}
}
// [END region_geolocation]
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7XIOPnu4WS_fBaIDPkCBdYa3MxdIcdK4&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
</div>
//此示例使用自动完成功能显示地址表单
//谷歌的PlacesAPI帮助用户填写信息。
var placeSearch,自动完成;
变量组件形式={
街道编号:“短名称”,
路线:'long_name',
地点:'long_name',
行政区域级别1:“短名称”,
国家:'long_name',
邮政编码:“短名称”
};
函数initAutocomplete(){
//创建自动完成对象,将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{!HTMLInputElement}*/(document.getElementById('autocomplete'),
{类型:['geocode']});
//当用户从下拉列表中选择地址时,填充该地址
//表单中的字段。
autocomplete.addListener('place\u changed',fillInAddress);
}
//[开始区域\填写表格]
函数fillInAddress(){
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace();
for(componentForm中的var组件){
document.getElementById(组件).value='';
document.getElementById(组件).disabled=false;
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于(变量i=0;i
您需要处理两个自动完成输入。下面是fillInAddress
的通用版本,它将处理多个具有唯一扩展名的字段的自动完成对象(表单第二个版本中的“2”):
工作代码片段:
//此示例使用自动完成功能显示地址表单
//谷歌的PlacesAPI帮助用户填写信息。
var placeSearch、自动完成、自动完成2;
变量组件形式={
街道编号:“短名称”,
路线:'long_name',
地点:'long_name',
行政区域级别1:“短名称”,
国家:'long_name',
邮政编码:“短名称”
};
函数initAutocomplete(){
//创建自动完成对象,将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{!HTMLInputElement}*/
(document.getElementById('autocomplete')){
类型:['geocode']
});
//当用户从下拉列表中选择地址时,填充该地址
//表单中的字段。
autocomplete.addListener('place\u changed',function(){
fillInAddress(自动完成,“”);
});
autocomplete2=新建google.maps.places.Autocomplete(
/**@type{!HTMLInputElement}*/
(document.getElementById('autocomplete2')){
类型:['geocode']
});
自动完成2.addListener('place\u changed',function(){
fillInAddress(自动完成2,“2”);
});
}
函数fillInAddress(自动完成,唯一){
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace();
for(componentForm中的var组件){
if(!!document.getElementById(组件+唯一)){
getElementById(组件+唯一)。值=“”;
document.getElementById(组件+唯一)。disabled=false;
}
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于(变量i=0;i
这是一个老问题,但我想我会发布我的解决方案,以防将来对其他人有所帮助。我的解决方案可以处理任意数量的地图api自动完成字段
function fillInAddress(autocomplete, unique) {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
if(!!document.getElementById(component + unique)){
document.getElementById(component + unique).value = '';
document.getElementById(component + unique).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] && document.getElementById(addressType + unique)) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType + unique).value = val;
}
}
}
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete')), {
types: ['geocode']
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', function () {
fillInAddress(autocomplete, "");
});
// Create the second autocomplete object, restricting the search to geographical
// location types.
autocomplete2 = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
autocomplete2.addListener('place_changed', function () {
fillInAddress(autocomplete2, "2");
});
var input = document.getElementsByClassName('address');
for (var x = 0; x < input.length; x++) {
addListener(input[x]);
}
function addListener(el) {
var autocomplete = new google.maps.places.Autocomplete(el);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// Do whatever you want in here e.g.
// var place = autocomplete.getPlace();
});
}
function initMultiComplete() {
jQuery('.maps-complete').each(function(){
var id = jQuery(this).prop('id');
var $this = jQuery(this);
var parent = jQuery(this).parent('div');
var jautocomplete = new google.maps.places.Autocomplete(document.getElementById(id), {types: ['geocode']});
jautocomplete.addListener('place_changed', function () {
var place = jautocomplete.getPlace();
var address = $this.val();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
jQuery( '.maps-autocomplete-lat', parent ).val(lat);
jQuery( '.maps-autocomplete-lng', parent ).val(lng);
});
});
}
https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMultiComplete