用于地址自动完成的 Google API 不起作用

Question

我试图在我的 Siebel 应用程序中的一个文本字段上使用 Google API 实现地址自动完成功能。我不断收到错误“谷歌未定义”。我正在使用 jquery 以下是我的代码：

     PhoneChangePR.prototype.BindData = function(a) {
                SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
$.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
            console.log("Google maps successfully added");
            });
                  $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU", function() {
            console.log("Second script loaded successfully");
            });


             var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
    });

请帮助。提前致谢。

Answer 1

您正在异步加载 google maps API，但您尝试在 API 加载之前调用 google.maps.places.Autocomplete 构造函数。

将所有依赖于正在加载的 API 的代码移动到成功回调中。

PhoneChangePR.prototype.BindData = function(a) {
    SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
    $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
        console.log("jQuery successfully loaded");
    });

    $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU", function() {
        console.log("Google maps successfully added");
        var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            console.log(place.address_components);
        });
    });
});

您可能希望在地图 JS 成功加载时使用 Google 自己的回调，而不是依赖 jQuery 的成功回调，方法是将 callback URL 参数添加到加载地图 API 的请求中。试试这个：

PhoneChangePR.prototype.BindData = function(a) {
    SiebelAppFacade.PhoneChangePR.superclass.BindData.call(this, a);
    $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
        console.log("jQuery successfully loaded");
    });

    $.getScript("http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU&callback=setupAutocomplete");
});

function setupAutocomplete() {
    console.log("Google maps successfully added");
    var autocomplete = new google.maps.places.Autocomplete($("input[aria-labelledby=NewAddressLine1_Label]")[0], {});

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
        console.log(place.address_components);
    });
}