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

Question

我试图在我的 Siebel 应用程序中的一个文本字段上使用 Google API 来实现地址自动完成功能。我一直收到错误 "google not defined"。我正在使用 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);
    });

请提前help.Thanks。

Answer 1

您正在异步加载 google 映射 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 的成功回调，您可能希望在地图 JS 加载成功时使用 Google 自己的回调，方法是添加 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);
    });
}

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

Google API for address autocompletion not working

jquery

google-maps

siebel

google-api