Question

我正在使用Bootstrap 3开发Django项目。目标是在导航栏下方以整页宽度和高度显示Google Map。我可以在标准桌面视口上执行此操作。但是，在移动屏幕宽度上，地图的顶部和底部会出现灰色区域。

我已将父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;
}

关于修复的任何想法？

Answer 1

让它变得更容易。如果地图只是您要展示集#map_canvas到position: fixed; top:0; bottom:0; left:0; right:0;

应该这样做。

<强>更新即可。
要将条形图保持在顶部，请将顶部属性设置为菜单栏的高度。示例：top: 20px;

Answer 2

尝试用100vw替换所有宽度值，并用100vh替换所有高度值。

（代替100％）。

100vw =视口宽度的100％ 100 vh =视点高度的100％。

Answer 3

在jQuery Mobile中，页眉和页脚是两种标准类型的工具栏，可以按Toolbar positioning options中所述的不同方式定位。

对于像地图查看器这样需要用地图本身填充整个屏幕的沉浸式界面，您可以使用全屏固定工具栏。要在固定页眉或页脚上启用此选项，请将data-fullscreen属性添加到元素中。

全屏固定标头标记示例：

<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>

Google Map（jQuery脚本）无法在移动视口

3 个答案: