如何使用 jQuery Mobile 显示全屏谷歌地图？答案

【问题标题】：How can I display a full screen google map with jQuery Mobile?如何使用 jQuery Mobile 显示全屏谷歌地图？
【发布时间】：2012-05-11 11:38:13
【问题描述】：

以下代码显示奇怪的输出。我应该看到全屏移动地图。但由于某种原因，它只显示在屏幕的一部分上。我正在使用 jquery.ui.map 进行映射。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.map.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content" id="map_canvas"  name="contentMain">   

    </div><!-- /content -->

</div><!-- /page -->
<script>

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
});
</script>
</body>
</html>

输出：

提前致谢。

【问题讨论】：

标签： jquery google-maps jquery-mobile google-maps-api-3

【解决方案1】：

我的移动网站的解决方案是为画布 div 设置样式 position:absolute; width:100%; height:100%;。您可以使用top 和bottom 样式为工具栏留出空间。

【讨论】：

考虑调整地图大小：google.maps.event.trigger(map, "resize");

【解决方案2】：

如果您使用 jQuery，

页眉和页脚 是不可避免的。我为页眉和页脚设置了{data-position="fixed" data-fullscreen="true"}，并同时设置了html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; }，以便菜单和地图在移动设备上完美地协同工作。

【讨论】：

我一直在寻找这个解决方案一天。这非常有效！非常感谢。

【解决方案3】：

容器和地图画布需要 100% 的宽度和高度。

从 jQuery 移动网站他们的结构是：

<div data-role="page" id="map-page" data-url="map-page">
    <div data-role="header" data-theme="c">
        <h1>Maps</h1>
    </div>
    <div data-role="content" id="map-canvas">
        <!-- map loads here... -->
    </div>
</div>

还有 CSS：

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

从这里：http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

【讨论】：

【解决方案4】：

我已经搞砸了一段时间，并设法找到了完美的解决方案。它适用于有或没有标题的页面。对于任何分辨率和任何标题高度，它都会将地图完美地定位在标题和页面底部之间的空间中（如果没有标题，则在整个页面上）。

如果页面有标题，此解决方案需要 CSS 和 JS，仅当页面没有标题时才需要 CSS。

HTML

<div data-role="page" id="mapPage">
    <div data-role="header"`>
        <!-- your header HTML... -->
    </div>

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

CSS

#map-canvas {
    position: absolute;
    width: 100%; 
    height: 100%;
    top: 0;
    left: 0;
}

/* eliminates scrollbars in map infowindow (optional) */
#mappopup {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

var mapPageHeader = $("#mapPage .ui-header").eq(0);
if(mapPageHeader.length > 0) {
    var headerHeight = mapPageHeader.outerHeight();
    $("#map-canvas").css({
        'height': ($(window).height() - headerHeight + 1) + 'px',
        'top': headerHeight - 1
    });
}

【讨论】：