我目前正在使用 apache cordova、ionic 和 google map 开发网络应用程序。 我在尝试正确加载 google map js api 时遇到问题。问题是该应用程序无法在我的设备上运行，但当我在 Ripple 上模拟它时却运行得很好。
所以我有一个 Ionic View 的 Controller ，当用户进入此 View 时，条件会检查 google map 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>
我尝试了很多方法，例如使用 angular-load ，用 ajax 调用替换 getScript 函数(这基本上是同一件事)，尝试了这个 answer看看是否有帮助..
感谢您的帮助。
最佳答案
第一个解决方案
通过替换 Google map 加载链接解决了我的问题。
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:。
controller.js
在 map 的 Controller 中:
加载函数，我把https协议(protocol)替换成了http协议(protocol)。
$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);
}
};
第二种解决方案(使用 angular-google-maps)
只是提醒一下app.js中的 Angular 谷歌地图配置
对于那些使用 Angular 谷歌地图的人。该库会自动加载谷歌地图，您只需正确设置即可。还有一个事件来检查谷歌地图是否已加载。我当时没有意识到这一点，并将所有内容， Angular 谷歌地图加载过程与我的混合在一起。等等:)
angular.module('myapp').config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'myKey',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization,places'
});
})
关于javascript - 在 Ionic 应用程序上使用 $.getScript 加载 Google Map Api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37160545/