Question

以下编码显示微小产出。我应当看到一个完整的屏幕移动地图。但出于某种原因,它只显示一部分屏幕。我利用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>

产出:

“entergraph

提前感谢。

Answer 1

我移动网站的解决方案是建立风格<密码>:绝对;宽度:100%;高度:100%;。您可使用<代码>top 和bottom风格,将空间留给工具栏。

Answer 2

<>Header和脚 foot如果你重新使用 j,就不可避免。 I set {data-position=“fixed” data-full Screen="true”} for both Header andfooter, and set htmlhigh: 100%} Body{ 身高: 100%;差额:0;} #map{方位:absolute; width: 100%;高: 100%; 身高; pa: 0; } as well,从而使之菜单和地图在移动装置上完全合作。

Answer 3

集装箱和地图库必须达到100%的宽度和高度。

在吉大赛移动网站,其结构是:

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

社会保障局:

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

http://view.jquerymobile.com/master/demos/examples/maps/geoplace.php” rel=“nofollow” http://view.jquerymobile.com/master/demos/examples/maps/geoplace.php。

Answer 4

我早就在谈论这个问题,找到了完美的解决办法。它为网页配备或没有头盔。该地图将完全放在该页头和底之间的空间上(或如果头盔不在全页),用于任何决议和任何顶峰。

这一解决办法要求,如果该网页有头盔,则需要特别安全局和联合安全局,而只有在该网页没有头盔的情况下,特别安全局。

<><><><>>><>>>>><>>>>>>>

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

<>JS

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
    });
}

友情链接