我正在用Bootstrap 3做Django项目。目标是在导航栏下方以整页宽度和高度显示 Google 地图。我可以在标准桌面视口上执行此操作。但是,在移动屏幕宽度上,地图的顶部和底部会显示灰色区域。
桌面:http://screencast.com/t/3r0vBviNrK
手机:http://screencast.com/t/37YM8ifFdpw
我已将父div 设置为 100% 并尝试使用绝对定位。
html + jQuery
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = {{ marker_list|safe }};
// Info Window Content
var infoWindowContent = [
{% for instance in queryset %}
['<div class="info_marker_content">' +
'<a href="{{ instance.get_absolute_url }}"><img src="{{ instance.thumb }}" height="80" width="80"></a>' +
'<h3><a class="location-font-map" href="{{ instance.get_absolute_url }}">{{ instance.location }}</a></h3>' +
'<p><a class="qnote-font" href="{{ instance.get_absolute_url }}">{{ instance.quick_note }}</a></p>' + '</div>'],
{% endfor %}
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2], markers[i][3]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
}
</script>
.css
html, body {
overflow-x: hidden;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map_wrapper {
height: 100%;
width: 100%;
position: absolute !important;
}
#map_canvas {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: absolute !important;
}
关于修复的任何想法?
尝试将所有宽度值替换为 100vw,将所有高度值替换为 100vh。
(代替 100%)。
100vw = 视口宽度的 100%100 vh = 视口高度的 100%。
让它更容易。如果地图只是您希望显示集#map_canvas
position: fixed; top:0; bottom:0; left:0; right:0;
这应该可以做到。
更新。
要将栏保持在顶部,请将顶部属性设置为菜单栏的高度。示例:top: 20px;
在jQuery Mobile中,页眉和页脚是两种标准类型的工具栏,可以以不同的方式定位,如工具栏定位选项中所述。
对于需要用地图本身填充整个屏幕的沉浸式界面(如地图查看器),您可以使用全屏固定工具栏。若要在固定页眉或页脚上启用此选项,请将数据全屏属性添加到元素。
全屏固定标题标记示例:
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed Header!</h1>
</div>
全屏固定页脚标记示例:
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>Fixed Footer!</h1>
</div>