在Ionic应用程序上使用$.getScript加载谷歌地图Api

Loading Google Map Api using $.getScript on a Ionic app

本文关键字：getScript 加载 谷歌地图 Api Ionic 应用 应用程序 程序上      更新时间：2023-09-26

我目前正在使用apache cordova、ionic和谷歌地图开发web应用程序。我在尝试正确加载谷歌地图js api时遇到了问题。问题是，该应用程序在我的设备上不起作用，但当我在Ripple上模拟它时，它运行得很好。

所以我有一个Ionic View的控制器，当用户进入这个视图时，条件检查谷歌地图api是否加载，如果没有，我们加载它，然后开始使用GM api。我想不出哪里出了问题。

这是调用加载函数的条件。。。

$scope.$on('$ionicView.loaded', function () {
    var test = false;
    if (test) {
        alert("Google Map api fully loaded");
    }
    else {
        alert("Google map api not loaded"); //The alert is fired.
        $scope.loadApi();
    }
});

加载功能

$scope.loadApi = function () {
    if ($cordovaNetwork.isOnline()) //check if device is connected {
        alert('Loading api'); //The alert is fired
        $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx',
        function () {
            alert("Api Loaded"); //Alert not fired on device
            $scope.startGeo(); // The function isn't called so no map
        });
    }
    else {
        alert('Check your connexion');
    }
};

这是html部分，以防我忘了什么。。。。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!--Google map for Angular-->
        <script src="lib/angular-google-maps/lodash.min.js"></script>
        <script src="lib/angular-google-maps/angular-simple-logger.min.js"></script>
        <script src="lib/angular-google-maps/angular-google-maps.min.js"></script>
        <script src="lib/localforage/localforage.min.js"></script>
        <script src="lib/localforage/angular-localForage.min.js"></script>
        <script src="lib/jquery.js"></script>
        <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>
        <!-- your app's js -->
        <script src="js/app.js"></script>
        <!--<script src='https://maps.googleapis.com/maps/api/js?sensor=false&key=xxx'></script>-->
        <script src="js/controllers.js"></script>
    </head>
    <body ng-app="myapp">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

我尝试过很多事情，比如使用角度加载，用ajax调用替换getScript函数（这基本上是一样的），尝试过这个答案，看看它是否有帮助。。

谢谢你的帮助。

第一个解决方案

通过替换谷歌地图加载链接解决了我的问题。

index.html

安装了白名单插件并添加到头部：

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

替换谷歌地图加载链接：

<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

从链接中删除了https://strong>。

controller.js

在地图的控制器中：

加载功能，我用http协议代替了https协议。

$scope.loadApi = function () {
    if ($cordovaNetwork.isOnline()) {
        console.log($scope.logs.apiLoading);
        $.getScript('http://maps.googleapis.com/maps/api/js?sensor=false', function () {
                $scope.startGeo();
        });
    }
    else if($cordovaNetwork.isOffline()) {
        alert($scope.logs.deviceOffline);
    }
};

第二个解决方案（使用角度谷歌地图）

只是提醒一下app.js中有棱角的谷歌地图的配置

对于那些使用Angular谷歌地图的用户。库会自动加载谷歌地图，您只需正确设置即可。还有一个事件用于检查谷歌地图是否已加载。我当时并没有意识到这一点，把所有的东西，棱角分明的谷歌地图加载过程和我的混合在一起。etcetera:）

angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'myKey',
        v: '3.20', //defaults to latest 3.X anyhow
        libraries: 'weather,geometry,visualization,places'
    });
})
相关文章：