谷歌地图显示在浏览器上，但不在真实设备android中

Question

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

所述

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

但没有运气并且已经使用不同数量的元标记分别应用了更改，如其他线程所描述但没有运气。在控制台中，我可以将错误视为“未捕获的ReferenceError：未定义谷歌”。为此我尝试了不同的线程，如下所述

Uncaught ReferenceError: google is not defined

但仍然得到同样的错误。我无法解决这个错误。我在下面缺少的是我在app.Index页面代码中使用的代码

这是我的控制器代码

    .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"/>

任何帮助

Answer 1

您似乎还没有在index.html文件中导入Google地图。

问题在于： <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>