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

【问题标题】：Multiple Google Autocomplete and Places Search Issue多个 Google 自动填充和地方搜索问题
【发布时间】：2015-01-19 11:09:54
【问题描述】：

我需要一些关于 Google Maps API 和使用自动完成和地址完成的帮助。

这是我目前的代码：

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

地点下拉菜单运行良好，允许您输入，然后会提出很好的建议。

但是，当我单击来自输入中的建议之一时，我在控制台中收到此错误。

Uncaught TypeError: Cannot read property 'address_components' of undefined

但是当我在“收件人”输入框中执行此操作时，它可以正常工作并返回邮政编码。

如果我然后返回第一个输入“from”，然后再次输入地址，这一次它会返回一个邮政编码，但它会返回来自第二个输入“to”的邮政编码。

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

提前感谢您的帮助！

【问题讨论】：

标签： javascript jquery html google-maps google-maps-api-3

【解决方案1】：

您正在覆盖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");

【讨论】：