1

Google マップを単純な jquery モバイル アプリケーションに組み込もうとしています。jqm の pageinit イベントを使用してマップを作成できます。html はコンテナの div に追加されますが、高さが 0 であることが判明しました。マップを画面の領域の 100% にしたいと考えています。

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head> 
<body> 

<div data-role="page" id="indexPage" data-add-back-btn="true">

<div data-role="header">
    <a href='#' class='ui-btn-left ui-btn-back' data-icon='arrow-l'>Back</a>
    <h1>Page Title</h1>
    <a href="index.html" data-icon="gear" class="ui-btn-right">Refine</a>
</div>


    <div id="map_canvas" style="width:100%;height:100%;"></div> 


<div data-role="footer" data-position="fixed">
    <h4>Page Footer</h4>
</div>
</div>

<script>
$( '#indexPage' ).live( 'pageinit',function(event){
    var myOptions = {
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapElement = $("#map_canvas");      

    var map = new google.maps.Map(mapElement[0], myOptions);
});
</script>

</body>
</html>
4

3 に答える 3

3

ページの読み込み時にタグで計算する関数を追加することをお勧めします。

<script  type="text/javascript">
$(document).delegate('#indexPage', 'pageshow', function () {
    var height = ($(window).height() - $("#indexPage").find('[data-role="header"]').outerHeight() - $("#indexPage").find('[data-role="footer"]').outerHeight());
    $("#map_canvas").height(height);
});
</script>
于 2012-05-30T19:43:27.683 に答える
0

とても簡単です - このCSSを追加するだけです

<style>
    #indexPage {
        height: 0;
    }

    #map_canvas {
        height: 100%;
        padding: 0;
        text-shadow: none;
    }
</style>
于 2013-05-09T22:25:59.697 に答える