javascript - Cordova OnsenUI 应用程序中的 Google Maps V3( map 显示在浏览器中，但不显示在手机上)

Question

我正在尝试在使用 OnsenUI 的 Cordova App 中显示 Google Map V3。当我在浏览器中运行它时它会显示 Google map ，但当我在实际手机中运行它时它会显示空白屏幕而不是 map 。

我浏览过许多其他帖子，但这里的问题似乎有所不同。这是代码:

//Map initialization  
$timeout(function(){
    alert('Inside Time Out for Google Map');
    var latlng = new google.maps.LatLng(35.7042995, 139.7597564);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    alert('Google Map almost loaded');
    $scope.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    $scope.overlay = new google.maps.OverlayView();
    $scope.overlay.draw = function() {}; // empty function required
    $scope.overlay.setMap($scope.map);
    $scope.element = document.getElementById('map_canvas');

},100);

alert('End of MapController');

在上面的代码中，执行进入超时函数并显示:

alert('Inside Time Out for Google Map');

但是当它遇到这一行时:

var latlng = new google.maps.LatLng(35.7042995, 139.7597564);

然后执行不会继续。

我在 Cordova config.xml 文件中添加了这些访问权限:

<access origin="*" subdomains="true"/>
<access origin="*.google.com"/> 
<access origin="*.googleapis.com"/>
<access origin="*.gstatic.com"/>
<access origin="maps.google.com*"/>

知道为什么会这样吗？

Answer 1

我发现了问题。问题出在 Cordova config.xml文件:

我创建了一个新的 Cordova 项目并放置了 www文件夹里面有我的更改并且它有效。

我们需要在config.xml中添加这些配置文件。仅添加 <access...>在我的情况下不起作用:

<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
    <allow-intent href="market:*" />
</platform>
<platform name="ios">
    <allow-intent href="itms:*" />
    <allow-intent href="itms-apps:*" />
</platform>

自过去 18 小时以来，我一直在努力解决这个问题，终于找到了办法。我希望它也能帮助其他人。