谷歌地图V3在科尔多瓦OnsenUI应用（地图显示在浏览器中而不是在电话上） [英] Google Maps V3 in Cordova OnsenUI App (Map displays in Browser but not on Phone)

问题描述

我想在科尔多瓦应用使用的 OnsenUI 以显示谷歌地图V3 。它显示，当我运行到浏览器中，但是当我在实际手机中运行它，然后它显示黑屏，而不是显示地图谷歌地图。

I am trying to show Google Map V3 in Cordova App that uses OnsenUI. It displays the Google Map when I run it into browser but when I run it in actual Phone then it shows Blank Screen instead of showing Map.

我经历了许多其他职位走了，但这里的问题似乎是不同的。这里是code：

I have gone through many other posts but problem here seems to be different. Here is the code:

//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');

在上面的code，执行走了进去超时功能并显示：

In the above code, execution goes inside timeout function and displays:

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

但是，当它遇到这一行：

But when it encounters this line:

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

然后执行不会继续。

then execution does not proceed.

我已经加入科尔多瓦config.xml文件中这些访问：

I have added these access in Cordova config.xml file:

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

任何想法，为什么会这样？

Any idea, why this is happening?

推荐答案

我发现这个问题。问题是是科尔多瓦 config.xml中文件：

I found the issue. The issue was with Cordova config.xml file:

我创建了一个新的项目科尔多瓦，把里面的 WWW 文件夹我的变化和它的工作。

I created a new Cordova Project and put www folder inside that with my changes and it worked.

我们需要在 config.xml中文件中添加这些配置。只添加＆LT;接...＆GT; 并没有我的情况下工作：

We need to add these configurations in config.xml file. Adding only <access...> did not work in my case:

<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小时，终于找到了一种方法。我希望这将帮助其他人也。

I was struggling with it since last 18 hours and finally found a way. I hope it will help others also.

这篇关于谷歌地图V3在科尔多瓦OnsenUI应用（地图显示在浏览器中而不是在电话上）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！