科尔多瓦谷歌地图Div空白

时间:2017-03-30 05:11:28

标签: cordova cordova-plugins

我整天都在研究这个问题,我终于放弃了,我将在这里问这个问题我已经尝试了很多来自谷歌搜索来解决这个问题,但到目前为止我还没有找到解决方案

我一直在尝试将谷歌地图添加到我的Cordova应用程序今天我更新了我的所有插件和cordova版本,以及最新的谷歌服务

我添加了插件cordova-plugin-googlemaps,我有API密钥,他们正在工作。

我使用示例代码创建了。但是div不管我做什么总是空白的,如果使用全屏按钮,它显示一个对话框中的地图,它在IOS和Android中作为全屏地图出现,但我想在一个地图内得到一个地图格。

下面的所有代码和屏幕图像,当我按下全屏按钮时,它会出现一个全屏地图,但我试图在全屏按钮上方的div中显示地图。

地图Javascript

var map;
document.addEventListener("deviceready", function() {
  var divMap = document.getElementById("mainMap");
  // Initialize the map view
  map = plugin.google.maps.Map.getMap(divMap);
  // Wait until the map is ready status.
  map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
}, false);

function onMapReady() {
  var button = document.getElementById("button");
  button.addEventListener("click", onBtnClicked, false);
}

function onBtnClicked() {
  map.showDialog();
}

HTML

 <div id="map-page" data-role="page" >
            <div data-role="header" data-id="header1" class="ui-header">
                <a href="#" data-rel="back" data-role="button" data-icon="arrow-l" data-inline="true" >Back</a>
                <h1>Maps</h1>
            </div> 
                <div id="mainMap" style="height:400px;width:100%;margin-top:50px;"> </div>
                <button id="button">Full Screen</button>
        </div>

enter image description here

1 个答案:

答案 0 :(得分:0)

由于cordova-plugin-googlemaps插件在浏览器视图下放置了地图视图, 浏览器(HTML元素)必须是透明的。

所以你不能设置背景图像。

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/class/Map/README.md#how-does-the-plugin-work