Question

我尝试了很多解决方案，但没有一个能够解决问题。

我有一个固定页眉和页脚的布局（真正固定不会消失），我喜欢用地图填充<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?

Answer 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"。

JQuery Mobile - 使用地图填充内容div，不滚动

1 个答案: