多个Google自动填充和地方搜索问题

问题描述

我需要一些关于Google Maps 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）; 
 
 
 
 
函数初始化（出）{
 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 =textid =fromclass =location> 
< input type =textid =toclass =location> 
< input id =fromPctype =text> 
< input id =toPctype =text> 
  

地点下拉菜单功能完美，可让您输入内容，然后提出建议。

然而，当我点击输入内容中的一条建议时，我在控制台中看到了这个错误。

<$未知的TypeError：无法读取未定义的属性'address_components'

但是当我在To输入框中工作时，它工作正常，并返回邮政编码。

如果我回到第一个输入from，然后输入地址它再次返回一个邮政编码，但它返回从第二个输入到的邮编。

有谁知道如何解决这个问题。

我很感谢您的帮助！

（全局）变量 autocomplete 内部初始化。

在初始化中创建变量local，并将它作为参数传递给 fillInAddress

 函数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; 
 
 
 
 $ b函数初始化（出）{
 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）; 
  

I am in need of some help regarding Google Maps API and using Autocomplete and Address complete.

This is currently my code:

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

The places dropdown is working perfectly and allows you to type and then will come up with the suggestions fine.

However when I click on one of the suggestions in the from input I get this error in the console.

Uncaught TypeError: Cannot read property 'address_components' of undefined

But when I do it in the To input box it works fine and returns the postcode.

If I then go back to the first input "from" and then enter the address again it returns a postcode this time but it returns the postcode from the second input "to".

Does anyone know how to resolve this.

I appreciate your help in advance!

解决方案

You are overwriting the (global) variable autocomplete inside initialize.

Make the variable local inside initialize and pass it as argument to 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自动填充和地方搜索问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！