使用离子模块和NgMap模块的空白屏幕

Question

我需要一些帮助，我正在尝试加载'NgMap‘模块，以便在使用离子框架构建的应用程序中呈现谷歌地图。我在我的浏览器中得到了正确的响应，在我的开发者控制台中没有任何错误，但是当我在安卓中模拟应用程序或者用我的iPhone进入离子视图时，我得到了一个空白屏幕。我不知道我做错了什么，我会感谢任何人的帮助。下面是我的代码：

index.html：

    <script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

app.js：

angular.module('starter', ['ionic', 'ui.router', 'starter.controllers', 'ngMap'])

map.html：

<ion-view view-title="Get Directions">
<ion-content data-tap-disabled="true">
    <div class="row nomargin">
        <div class="col text-center">
            <h4>7810 NW 98th Street </br> Miami Lakes, FL 33016</h4>
        </div>
    </div>
    <div class="row nomargin">
        <div class="col">
            <button class="button button-block map-button">
              <h4>Open in Maps</h4>
            </button>
        </div>
    </div>
    <div class="row nomargin nopadding">
        <div class="col nomargin nopadding">
            <map class="map-height" center="25.862359, -80.324403" zoom="13">
                <marker position="[25.862359, -80.324403]" />
            </map>
        </div>
    </div>
</ion-content>

​

正如我所说的，我在我的浏览器和地图渲染中没有得到任何错误，但在模拟器或离子视图中，出现了一个白屏。提前谢谢。

PD:对不起，我的英语很糟糕

Answer 1

我也有过类似的问题。我安装了GapDebug，错误是在‘安卓模拟器’中运行的应用程序找不到用于‘ngMap’的两个外部库：

<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

使用GapDebug捕获的错误屏幕截图：

​

​

我必须更改标签，使其包含"https(http也可以工作)“才能正常工作：

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

更改这些链接还修复了“离子视图-空白页面”的问题。