Question

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

我遇到的问题是应用程序在浏览器中工作正常，但我在ios模拟器和离子视图应用程序中获得了“死亡的白屏”。但是，如果我运行 ionic emulate ios -l-c ，地图会在模拟器中按预期加载。

我已阅读了许多可能的解决方案，但它们在我的实例中似乎没有帮助。

以下是我尝试过的一些事情：

1）在config.xml中添加了以下代码：

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

2）在链接到google地图js（其中XXXX用我的密钥填写）之前删除了所有“/”：

<!-- 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未找到。

有什么想法吗？

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

rules

Answer 1

哇，这是我在StackOverflow上的第一个答案！我和你有完全相同的问题。事实证明，问题出在地图的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模拟器不加载谷歌地图

1 个答案: