javascript - 使用 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>

正如我所说，我的浏览器中没有出现任何错误，并且 map 渲染正确，但在模拟器或 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-空白页面”问题。