谷歌地图显示在浏览器上，但不在真实设备安卓中答案

【问题标题】：Google map is showing on browser but not in real device android谷歌地图显示在浏览器上，但不在真实设备安卓中
【发布时间】：2016-12-15 03:28:46
【问题描述】：

我是 ionic 平台的新手。我正在尝试在我的应用程序中实现谷歌地图。当我在浏览器上测试时，地图正在显示，但在 Android 上的真实设备上运行时，它只是显示白屏。我尝试了不同线程中推荐的不同数量的东西。我已经应用了配置文件中的更改，如下面链接中所述

https://github.com/driftyco/ionic-starter-maps/issues/10

但没有运气，并且使用不同数量的元标记单独应用更改，如其他线程中所述，但没有运气。在控制台中，我可以看到错误为“未捕获的 ReferenceError：未定义 google”。为此，我尝试了下面提到的不同线程

Uncaught ReferenceError: google is not defined

但仍然遇到同样的错误。我无法弄清楚这个错误。下面我还缺少什么是我在我的应用程序中使用的共享代码。索引页面代码是

这是我的控制器代码

    .controller('MapCtrl', function($scope, $ionicLoading) {
 google.maps.event.addDomListener(window, 'load', function() {
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var myDiv=document.getElementById("map");
        var map = new google.maps.Map(myDiv, mapOptions);
    });
 })

以下是我在不同线程中推荐的配置文件中添加的行

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

任何帮助

【问题讨论】：

下次请提供控制器的类似代码。屏幕截图不容易查看/调试和复制/粘贴。

标签： android angularjs google-maps ionic-framework

【解决方案1】：

您似乎没有在文件index.html中很好地导入谷歌地图。

问题在于： <script src="//maps.google.com/maps/api/..."></script>

在浏览器上，它将加载此脚本：http://maps.google.com/maps/api/...，因为您通过 http 提供文件。

但在设备上，您通过file:// 提供文件，因此它将尝试加载此脚本：file://maps.google.com/maps/api/... 那是不可用的。

所以你需要像这样指定 https：

<script src="https://maps.google.com/maps/api/..."></script>

【讨论】：