Question

    <!DOCTYPE html>
<html>
<head>
<title>JQUERY MOBILE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

<style type="text/css">
#map-canvas {
height: 100%;
margin: 0%;
padding: 5%
}
</style>

<script type="text/javascript">
    // initialize
function initialize() {
    // mylatlng
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
    // set map
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// set marker
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Hello World!'
});
marker.setMap(map);
}
    // initialize
google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>GOOGLE MAPS V3</h1>
</div>

<div data-role="content">
<div id="map-canvas"></div>
</div>

<div data-role="footer" data-position="fixed">
<h1>#GOOGLE MAPS V3</h1>
</div>
</div>

</body>
</html>

！[在此输入图片说明] [2]

我想要的是，包含地图的页面正文可以100％高可视化，但没有头部和脚部desaparescan，请帮助解决这个问题

图像显示为想要地图的图形，但是无法找到如何对画布图进行平方，每当我添加尺寸高100％和100％宽度的地图画布不包括几次

Answer 1

如果我正确阅读此内容，您会尝试在标题和固定页脚之间100％拉伸地图。

如果你看jquery mobile example with google maps他们的页面容器和地图画布设置为100％高度与标题。这是他们的HTML ......

<div data-role="page" id="map-page" data-url="map-page">
   <div data-role="header" data-theme="a" id="head">
      <h1>Maps</h1>
   </div>
   <div role="main" class="ui-content" id="map-canvas">
    <!-- map loads here... -->
   </div>
</div>

和css ...

<style>
   #map-page, #map-canvas { width: 100%; height: 100%; padding: 0; }
</style>

这就像拉伸地图一样，但是由于它们没有考虑的标题，它增加了（在他们的例子中）额外44个像素。我在一个项目中添加了一个小脚本来解决这个问题，这需要将地图设置为全局变量并在页面加载后调用resize过程（我在页面init中加载了地图）。

function resize_map() {
    $('#map-canvas').height($('#map-canvas').height() - $('#head').height());
    google.maps.event.trigger(map, "resize");
}

您还需要使用1px边框作为默认样式。

现在，如果要添加固定页脚，则还需要在设置高度时从地图画布中减去页脚的高度。页面中还添加了填充。

以下是我认为您要完成的代码......

<style type="text/css">
    #map-page, #map-canvas { width: 100%; height: 100%; padding: 0;}
    #map-page{padding-bottom:0px !important;}
    .ui-header, .ui-footer {border-width: 0px 0;}
</style>

您的样式，将页面和地图画布设置为100％高度，删除固定页脚添加的底部填充，并删除您链接的默认样式的边框...

<script type="text/javascript">
    var map;

    function resize_map() {
        $('#map-canvas').height($(window).height() - $('#head').height() - $('#foot').height());
        google.maps.event.trigger(map, "resize");
    }

    $( document ).on( "pageinit", "#map-page", function() {
        var latlng = new google.maps.LatLng(-25.363882, 131.044922);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Greetings!"
        });

        $(window).resize(function () {
           resize_map();
        });
    });

    $(document).on('pagecontainershow', function(){
        var pageid = $("body").pagecontainer("getActivePage").prop("id");

        if(pageid === "map-page"){
            resize_map();
        }
    });
</script>

脚本绘制地图，在页面上显示我们调用resize，减去页眉和页脚高度。

<div data-role="page" id="map-page" data-url="map-page">
    <div data-role="header" data-theme="a" id="head">
    <h1>Maps</h1>
    </div>
    <div role="main" class="ui-content" id="map-canvas">
        <!-- map loads here... -->
    </div>
    <div data-role="footer"  id="foot" data-position="fixed" data-tap-toggle="false">
        <h1>Google Maps V3</h1>
    </div>
</div>

您的基本HTML标记。

编辑：如果这是一个浏览器应用程序，则更改为window.height。您可能希望在调整窗口大小时触发调整大小功能。同样，这是将地图设置为固定页脚和标题之间的确切高度。

jquery mobile，谷歌地图机构高出100％

1 个答案:

以下是我认为您要完成的代码......