Question

我正在尝试将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>

Answer 1

我建议您在页面加载时添加一个函数来在标记中计算它：

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

Answer 2

计算并设置如下： $("#map_canvas").height(screen.height);

OR

确保#map_canvas的每个祖先DOM父级都设置了一个高度，因为height:100%表示其父级的100％。

JQM 1.3的css样本：

#page-id,
#page-id .ui-panel-content-wrap,    
#page-id #content-id,
#map-canvas{
  width: 100%;
  height: 100%;      
}

JQM 1.4 alpha2的css样本：

#page-id,
#page-id #content-id,
#page-id .ui-panel-wrapper,
#map-canvas{
  width: 100%;
  height: 100%;      
}

Answer 3

非常简单 - 只需添加此css

即可

<style>
    #indexPage {
        height: 0;
    }

    #map_canvas {
        height: 100%;
        padding: 0;
        text-shadow: none;
    }
</style>

jquery手机与谷歌地图没有高度

3 个答案: