Question

网络应用效果非常好。但是当我使用cordova / ionic构建移动应用程序时，会出现一个空白页面。

<!DOCTYPE html>
<html lang="en" >
  <head>
    <title>app</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
    <link rel="stylesheet" href="assets/style/app.css"/>
    <link rel="stylesheet" href="assets/style/map.css"/>
    <link rel="stylesheet" href="assets/style/dynamic-height.css"/>
    <link rel="stylesheet" href="assets/style/search-box.css"/>
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>    
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
    <script src="src/ui/fabCtrl.js"></script>
    <script src="src/ui/autoComplete.js"></script>      
    <script src="src/map/map.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src='bower_components/lodash/dist/lodash.js'></script>
    <script src='bower_components/angular-simple-logger/dist/angular-simple-logger.js'></script>
    <script src='/bower_components/angular-google-maps/dist/angular-google-maps.js'></script>
    <script src="/src/map/dynamic-map-height.js"></script>
    <script src="src/map/angular-google-maps_dev_mapped.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script>
    <script src="/src/dev_deps.js"></script>
    <script src="src/map/search-box-ngmodel.js"></script>
  </head>

地图div已添加到html正文中。这是angular-google-maps的一个例子。

<div data-ng-controller="ctrl" ng-hide="true">

            <ui-gmap-google-map id="map"
                center="map.center"
                pan="map.pan"
                zoom="map.zoom"
                draggable="true"
                refresh="map.refresh"
                options="map.options"
                events="map.events"
                bounds="map.bounds">

                <ui-gmap-map-control template="draw.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
                <ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>

                <ui-gmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></ui-gmap-free-draw-polygons>

            </ui-gmap-google-map>      
        </div>

我不知道哪里出错了。所有的依赖都是对的。 Chrome控制台中没有错误。

Answer 1

ionic自动安装content-security-policy插件。可能你没有使用它。如果未安装，则可以安装https://github.com/apache/cordova-plugin-whitelist

然后尝试将此行添加到index.html

<script>

允许您的应用访问Google地图远程脚本。

Answer 2

首先，确保您的js图书馆依赖顺序正确。

在您的情况下，您使用的是angular-google-map ploygons生成器示例。实际上这个例子在cordova项目中不能正常工作。试试另一个例子，我想你会显示地图。

Cordova /离子APP不适用于Angularjs谷歌地图

2 个答案: