JQuery Mobile - 用地图填充内容 div，没有滚动

Posted 2023-05-09

【中文标题】JQuery Mobile - 用地图填充内容 div，没有滚动

【英文标题】：JQuery Mobile - Fill content div with map, no scroll

【发布时间】：2012-07-08 02:15:55

【问题描述】：

我尝试了很多解决方案，但都没有奏效。

我有一个带有固定页眉和页脚的布局（真正固定不消失），我喜欢用地图填充<div data-role="content">。我还希望在此内容 div 中禁用垂直和水平滚动。

解决方案不起作用：Google Map extends off edge of page when embedded inside jQuery Mobile "page" google maps in jquery mobile How to create div with 100% height with jquery mobile? JQuery-Mobile content area 100% height between head and foot Maximise div[data-role=content] in Jquery Mobile How can I display a full screen google map with jQuery Mobile?

【问题讨论】：

请将示例或您的代码发布到jsFiddle.net

【参考方案1】：

一年多过去了，但如果有人仍然想解决这个问题，方法如下：

使用 jquery mobile 1.3.1 和 Google Maps API v3 测试

在 html 中，将其用于内容：

<div data-role="content">
    <div id="mapDiv"></div>
</div>

提示：不要在页面的任何 div 上使用 data-fullscreen。

然后，在你的 CSS 中使用这个：

#mapDiv 
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 58px !important;  
    left : 0 !important;     

记得在你的 mapDiv 中创建你的地图，这样你的 JS 会是这样的：

map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);

就是这样！即使您旋转显示它的设备，它也会起作用。

提示：您必须在页眉和页脚中使用data-position="fixed" 和data-tap-toggle="false"。