google-maps - JQuery Mobile - 用 map 填充内容 div，无滚动

Question

我尝试了大量的解决方案，但没有一个奏效。

我有一个带有固定页眉和页脚的布局(真正的固定不会消失)，我喜欢获取 <div data-role="content"> 的填充与 map 。我还希望在此内容 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?

Answer 1

一年多后，但如果有人仍然想解决这个问题，这里是如何:

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

在 HTML 中，将其用于内容:

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

提示:请勿使用 data-fullscreen在页面的任何 div 上。

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

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

记住在你的 mapDiv 中创建你的 map ，所以你的 JS 会像:

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

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

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