多个 Google 自动完成和地点搜索问题
Multiple Google Autocomplete and Places Search Issue
我需要一些有关 Google 地图 API 以及使用自动完成和地址完成的帮助。
这是我目前的代码:
JS
function fillInAddress(show) {
console.log(show);
var place = autocomplete.getPlace();
for (var i = 0; i < place.address_components.length; i++){
var base = place.address_components[i].types[0];
if(base === "postal_code"){
console.log(place.address_components[i].long_name);
}
}
}
function initialize(out) {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(out)),
{types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress(out);
});
}
initialize("from");
initialize("to");
HTML
<input type="text" id="from" class="location">
<input type="text" id="to" class="location">
<input id="fromPc" type="text">
<input id="toPc" type="text">
地点下拉菜单运行良好,允许您输入内容,然后会很好地提出建议。
但是,当我点击 from 输入中的其中一项建议时,我在控制台中收到此错误。
Uncaught TypeError: Cannot read property 'address_components' of undefined
但是当我在“收件人”输入框中执行此操作时,它工作正常并且 returns 邮政编码。
如果我然后返回到第一个输入 "from" 然后再次输入地址,它 returns 这次是邮政编码,但它 returns 来自第二个输入的邮政编码 "to".
有谁知道如何解决这个问题。
在此先感谢您的帮助!
您正在覆盖 initialize
内的(全局)变量 autocomplete
。
在 initialize
中创建局部变量并将其作为参数传递给 fillInAddress
function fillInAddress(show,ac) {
var place = ac.getPlace();
for (var i = 0; i < place.address_components.length; i++){
var base = place.address_components[i].types[0];
if(base === "postal_code"){
document.getElementById(show+'Pc').value
= place.address_components[i].long_name;
return;
}
}
}
function initialize(out) {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(out)),
{types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed',
function () {
document.getElementById(out+'Pc').value='';
fillInAddress(out,autocomplete);
});
}
initialize("from");
initialize("to");
我需要一些有关 Google 地图 API 以及使用自动完成和地址完成的帮助。
这是我目前的代码:
JS
function fillInAddress(show) {
console.log(show);
var place = autocomplete.getPlace();
for (var i = 0; i < place.address_components.length; i++){
var base = place.address_components[i].types[0];
if(base === "postal_code"){
console.log(place.address_components[i].long_name);
}
}
}
function initialize(out) {
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(out)),
{types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
fillInAddress(out);
});
}
initialize("from");
initialize("to");
HTML
<input type="text" id="from" class="location">
<input type="text" id="to" class="location">
<input id="fromPc" type="text">
<input id="toPc" type="text">
地点下拉菜单运行良好,允许您输入内容,然后会很好地提出建议。
但是,当我点击 from 输入中的其中一项建议时,我在控制台中收到此错误。
Uncaught TypeError: Cannot read property 'address_components' of undefined
但是当我在“收件人”输入框中执行此操作时,它工作正常并且 returns 邮政编码。
如果我然后返回到第一个输入 "from" 然后再次输入地址,它 returns 这次是邮政编码,但它 returns 来自第二个输入的邮政编码 "to".
有谁知道如何解决这个问题。
在此先感谢您的帮助!
您正在覆盖 initialize
内的(全局)变量 autocomplete
。
在 initialize
中创建局部变量并将其作为参数传递给 fillInAddress
function fillInAddress(show,ac) {
var place = ac.getPlace();
for (var i = 0; i < place.address_components.length; i++){
var base = place.address_components[i].types[0];
if(base === "postal_code"){
document.getElementById(show+'Pc').value
= place.address_components[i].long_name;
return;
}
}
}
function initialize(out) {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(out)),
{types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed',
function () {
document.getElementById(out+'Pc').value='';
fillInAddress(out,autocomplete);
});
}
initialize("from");
initialize("to");