Javascript Cordova OnsenUI应用程序中的谷歌地图V3（地图显示在浏览器中，但不显示在手机上）

我试图在Cordova应用程序中显示

GoogleMapv3

，该应用程序使用OnsenUI。当我在浏览器中运行它时，它会显示谷歌地图，但当我在实际手机中运行它时，它会显示空白屏幕，而不是显示地图

我看过很多其他的帖子，但这里的问题似乎不同。代码如下：

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

---

知道为什么会这样吗？

我发现了这个问题。问题在于Cordova

config.xml

文件：

我创建了一个新的Cordova项目，并将

www

文件夹与我所做的更改一起放在该项目中，它成功了

我们需要在

config.xml

文件中添加这些配置。仅添加

在我的情况下不起作用：

<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个小时里，我一直在努力解决这个问题，最终找到了一个解决办法。我希望它也能帮助别人。

嗯。。。你加载谷歌地图js库了吗？对不起，我想不出其他原因：p@kaho是的，它被加载了。这就是它在浏览器中显示地图的原因。但这不是手机的问题。在你的回答中附加说明：Cordova 4+改变了白名单的处理方式。现在可以通过插件完成此操作：。在撰写本文时，这只会影响iOS和Android设备。