谷歌API地址自动完成不工作

Question

我试图在我的Siebel应用程序中的一个文本字段上使用Google 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("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);
        });
    });
});

比起依赖jQuery的成功回调，你可能想使用Google自己的回调，当地图JS已经成功加载，通过添加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);
    });
}