使用jquery.getScript()動態載入地圖js解決AMap is not undefined
阿新 • • 發佈:2019-01-05
需求:在使用cordova+jquerymobile開發H5 APP的時候,希望在使用高德地圖的頁面的pageshow方法中,載入地圖js,即地圖的懶載入功能。
實現方法:
之前錯誤的方式:
$.getScript("http://webapi.amap.com/maps?v=1.4.0&key=xxx&plugin=AMap.LineSearch");
//使用AMap
會報AMap is notundefined的錯誤。
原因是什麼呢?參考這篇文章
jquery .getscript() callback when script is fully loaded and executed其實就是這個方法是去載入js,但是其不保證立刻fullyloaded。
所以應該這樣使用
if (typeof(AMap) == "undefined") { $.getScript("http://webapi.amap.com/maps?v=1.4.0&key=xxx&plugin=AMap.LineSearch").done(function (script, textstatus) { if (textstatus == "success" && typeof (AMap) != undefined) { //所有使用AMap的內容 execBikePointMap(); } else { showAlert("無法載入地圖,請開啟網路"); } }); }else { execBikePointMap(); }
所以在一個js中如果要保證另一個js完整載入,那麼可以參考上述的實現方式。