科尔多瓦谷歌地图 Div 空白答案

【问题标题】：Cordova Google Maps Div Blank科尔多瓦谷歌地图 Div 空白
【发布时间】：2017-08-23 20:34:51
【问题描述】：

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

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

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

我已使用示例代码创建。但是无论我做什么，div总是空白bu如果使用全屏按钮，它会显示一个带有地图的对话框，它作为IOS和Android中的全屏地图很好，但我正在尝试在a中获取地图分区。

当我按下全屏按钮时，下面的所有代码和屏幕图像都会显示全屏地图，但我正在尝试在全屏按钮上方的 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>

【问题讨论】：

标签： cordova cordova-plugins

【解决方案1】：

由于 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

【讨论】：