phonegap谷歌地图与framework7 v2

Question

我在phonegap google maps与Framework7 esp v2，

一起工作时遇到了严重问题

我需要在HTML中选择一个div来放置地图，这就是我所做的：

HTML：

JavaScript的：

JS文件有更多逻辑，但在我打开此页面的Android设备上，我得到的页面与地图重叠。

地图已被渲染，但未替换原始HTML

以及它在F7 v1中的表现

Answer 1

首先，您需要了解此插件如何显示地图。 此插件在浏览器下生成本机地图视图，浏览器将为transparent。

当您打开新页面时，上一页位于HTML层次结构中的当前页面下。

但是，地图视图不是html元素，地图视图显示在上一页下方。

因此，解决方法是，您只需添加一个CSS规则。

.page-previous {
    display: none;
}

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2164

特别感谢wf9a5m75

Answer 2

但是，为什么要在地图画布上显示文字，然后想在地图画布上显示一个按钮？

因为，如果要显示按钮，请创建自定义控件https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map

var deleteAllButton = document.getElementById('deleteAllButton');
map.controls[google.maps.ControlPosition.BOTTOM].push(deleteAllButton);

如果是简单的文字，请将其放在

<div id="map" oncontextmenu="return false"></div>
<p>Your text</p>

然后使用position：absolute