Javascript Google 放置 API 库未动态加载

Question

我的javascript代码

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?libraries=places';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = function(){
var  autocomplete;

  autocomplete = new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')),
      { types: ['geocode'] });

我收到这个错误

Cannot read property 'Autocomplete' of undefined
    at HTMLScriptElement.script.onload (mabapamavo.js:18:40)

当我使用脚本标签加载库时，上面的相同代码有效。但是我想使用 Javascript.

动态加载库

我犯了什么错误？

Answer 1

错误消息告诉您 google.maps.places 未定义。如 in the documentation 所述，您应该使用初始化回调，而不是使用 script.onload。

您的代码应如下所示：

var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

initialize = function() {
    var autocomplete = new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });

Answer 2

当您异步加载地图 API 时，您不使用 onload 事件处理程序。相反，您在加载 API 的 URL 中传递回调函数的名称。关注 this example 就可以了。

Javascript Google 放置 API 库未动态加载

Javascript Google Place API library not getting loaded dynamically

javascript

autocomplete

google-places-api