google-maps - 带有framework7 v2的phonegap谷歌地图

Question

我在使用Framework7 esp v2的phonegap 谷歌地图时遇到了严重问题，

我需要在我的 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