使用Ionic和NgMap模块的空白屏幕

Question

我需要一些帮助，我正在尝试加载'NgMap'模块，在我使用Ionic Framework构建的应用程序中渲染Google Map。我在浏览器中得到了正确的响应，在我的开发者控制台中没有任何错误，但是当我在Android中模拟应用程序或使用我的iPhone进入Ionic View时，我得到一个空白屏幕。我不知道我做错了什么，我会感激任何帮助。这是我的代码：

的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>

正如我所说，我在浏览器中没有收到任何错误，并且地图正确渲染，但在模拟器或Ionic View中，显示为白色屏幕。提前谢谢。

PD：对不起我糟糕的英语

Answer 1

我有类似的问题。我在我的情况下安装了GapDebug，错误是“Android模拟器”中运行的应用程序无法找到用于'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>

更改这些链接还修复了“Ionic View-Blank page”问题。