1. 程式人生 > >使用jquery.getScript()動態載入地圖js解決AMap is not undefined

使用jquery.getScript()動態載入地圖js解決AMap is not undefined

需求:在使用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完整載入,那麼可以參考上述的實現方式。