Question

我们正在使用Ionic（+ Cordova）构建一个Android应用程序。

这一切都可以在我的浏览器中运行，但是当我构建它并运行.apk时会发生这种情况：

外部图片不会出现，嵌入的谷歌地图仍为空。我们的index.html上的以下代码：

function MyCtrl($scope) {

    $scope.item = ['a', 'b', 'c'];
    $scope.myValue = '';

    $scope.change = function() {
        console.log("change");
        alert("Change to: " + $scope.myValue);
    };

}

在config.xml中，我们在结束标记之后创建了以下行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <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>
    <script src="js/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>
</head>
<body ng-app="starter">

    <ion-pane>
          <ion-header-bar class="bar-stable">

          </ion-header-bar>
          <ion-content>
            <div class="main" role="main">

                <p id="geolocation">Finding geolocation...</p>
                <img src="http://placehold.it/350x150.png" alt="no image" />

                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div>
          </ion-content>
    </ion-pane>
</body>
</html>

Answer 1

检查您的清单，以允许您的应用使用互联网。

<uses-permission android:name="android.permission.INTERNET" />

如果您使用的是cordova 5（Android平台版本4.0.0），那么您应该包含白名单插件以及新的content security policy元标记，以允许谷歌地图api像这样加载（在您的顶部） html文件以及其他元标记）：

<meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
 http://maps.gstatic.com;">

编辑：还要检查config.xml您提供的访问权限：

<access origin="*" />

例如允许所有连接

如果它不起作用，请检查您的日志并发布任何错误。

离子 - 没有互联网连接

1 个答案: