Ionic ios 模拟器未加载 google 地图

Question

我创建了一个离子混合应用程序，它应该使用 angular-google-maps.min.js 访问 google 地图.

我遇到的问题是该应用程序在浏览器中运行良好，但我在 ios 模拟器以及离子视图应用程序中得到了 "white screen of death"。但是，如果我运行 ionic emulate ios -l-c 地图在模拟器中按预期加载。

我已经阅读了许多可能的解决方案，但它们似乎对我的情况没有帮助。

以下是我尝试过的一些方法：

1) 添加以下代码到 config.xml:

<access origin="http://maps.google.com"/>

2) 在index.html:

链接到google maps js（XXXX填写我的key）之前删除所有的“/”

<!-- ionic/angularjs-google-maps js -->
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=XXXX"></script>

3) 检查我的项目中是否有 cordova 插件以及运行:

    cordova build ios
    ionic build ios
    ionic emulate ios

4) 运行

    ionic platform remove ios
    ionic platform add ios

5) 查看了模拟器的日志，可能是我读错了（第一次使用），但我没有看到任何明显的错误或 404 not founds。

有什么想法吗？

我真的认为当我的应用程序正在构建时它没有引入 angular-google-maps.min.js 和相关文件，但不确定为什么会这样。如果有帮助，下面是我的 www 文件夹结构的屏幕截图：

WWW folder structure

Answer 1

哇，这是我在 Whosebug 上的第一个答案！我遇到了和你完全一样的问题。事实证明，问题出在地图的 CSS 处。这就是您在控制台中看不到任何问题的原因。

这里是坏的CSS:

<style type="text/css">
    .angular-google-map,
    .angular-google-map-container {
      height: 90%;
  }
</style>

这会导致地图不会出现在 iOS 模拟器上（我还没有在实际的 iOS 设备上测试过，但上面的代码在 Android 6.01 上运行良好） .

通过向父级添加百分比（在本例中为滚动），您可以修改其子元素的百分比。

<style type="text/css">
  .scroll {
      height: 100%;
  }
  .angular-google-map, .angular-google-map-container {
      width: 100%;
      height: 100%;
  }
</style>

Ionic ios 模拟器未加载 google 地图

Ionic ios emulator not loading google maps

google-maps

ios

angularjs

cordova

ionic