1

我正在尝试将谷歌地图合并到一个简单的 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 回答
1

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

或者

确保每个祖先的 DOM 父级#map_canvas都设置了高度，因为这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%;      
}
于 2013-08-16T08:44:45.993 回答
0

它非常简单 - 只需添加这个 css

<style>
    #indexPage {
        height: 0;
    }

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