开启数据后启用谷歌地图答案

【问题标题】：Enabling Google maps after data has been switched on开启数据后启用谷歌地图
【发布时间】：2015-09-15 16:04:40
【问题描述】：

我有一个带有角度引导程序的 Cordova 应用程序，该应用程序在 'deviceready' 上启动。

我的谷歌地图是这样链接的：

<script src="https://maps.googleapis.com/maps/api/js"></script>

如果应用启动时数据设置为关闭，那么显然该脚本将丢失。

如果用户打开数据，我如何初始化谷歌地图？我必须重新启动应用程序吗？我尝试通过“文档”注入脚本，但错误消息说这是不允许的。

非常欢迎任何帮助或提示。

干杯

戴尔

【问题讨论】：

您当然可以通过将脚本插入 DOM 来异步加载 Google Maps JS API。例如见stackoverflow.com/questions/16340529/…
是的，它可以将脚本注入 index.html，但是这会强制您在同一页面中也有一个回调函数 - 这意味着我无法访问我的 webapp $scope 中的任何内容这是必需的。谢谢

标签： javascript angularjs cordova google-maps google-maps-api-3

【解决方案1】：

基本上，此代码将检查在您的角度控制器中构建地图时是否加载了谷歌地图 api 库，如果没有则尝试获取它。

//already loaded build the map
if ($window.google && $window.google.maps) {
    prepareMap();
} else {    //not loaded
    //create a promise object
    var mapScriptPromise = getMapScript();
    mapScriptPromise.then(function(){
        prepareMap();   //now you can build the map
    });      
}

//create the hook for the file and return the deferred promise
function getMapScript() {
    var deferred = $q.defer();
    var script = document.createElement('script');
    //script callback
    $window.initMap = function() {
       deferred.resolve();
    }
    script.src = "https://maps.googleapis.com/maps/api/js?sensor=true&callback=initMap";
    document.body.appendChild(script);

    return deferred.promise;    
}

//add your map settings here i.e.
function prepareMap() {
    var map = new google.maps.Map(mapCanvas, mapOptions);
    ...
}

【讨论】：