谷歌的JavaScript 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未定義。您應該使用初始化回調，而不是使用script.onload，如in the documentation所述。

這裏是你的代碼應該是什麼樣子：

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

當你異步加載Google地圖API，您不使用onload事件處理程序。相反，您在加載API的URL中傳遞迴調函數的名稱。按照this example，它會工作。