jquery mobile, google map body 高出 100%
Posted
技术标签:
【中文标题】jquery mobile, google map body 高出 100%【英文标题】：jquery mobile, google map body 100% higher 【发布时间】：2014-09-03 17:38:31 【问题描述】： <!DOCTYPE html>
<html>
<head>
<title>JQUERY MOBILE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<style type="text/css">
#map-canvas
height: 100%;
margin: 0%;
padding: 5%
</style>
<script type="text/javascript">
// initialize
function initialize()
// mylatlng
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions =
zoom: 4,
center: myLatlng
;
// set map
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// set marker
var marker = new google.maps.Marker(
position: myLatlng,
title: 'Hello World!'
);
marker.setMap(map);
// initialize
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>GOOGLE MAPS V3</h1>
</div>
<div data-role="content">
<div id="map-canvas"></div>
</div>
<div data-role="footer" data-position="fixed">
<h1>#GOOGLE MAPS V3</h1>
</div>
</div>
</body>
</html>
![在此处输入图片描述][2]
我想做的是包含地图的页面主体可以100％可视化高和宽，但是没有头部和脚部desaparescan，请帮助解决这个问题
图像显示为图想要地图，但找不到如何将画布地图平方，每当我将尺寸增加 100% 和 100% 宽度时，地图画布不包括在内
【问题讨论】：
这是翻译的吗？... 【参考方案1】：如果我没看错，您是在尝试将地图在页眉和固定页脚之间拉伸 100%。
如果您查看jquery mobile example with google maps，他们的页面容器和地图画布设置为 100% 高度并带有标题。这是他们的 html...
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a" id="head">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
还有 css...
<style>
#map-page, #map-canvas width: 100%; height: 100%; padding: 0;
</style>
这可以拉伸地图，但由于没有考虑标题，它会增加（在他们的示例中）额外的 44 像素。我在不久前做的一个项目中添加了一个小脚本来解决这个问题，这需要将地图设置为全局变量并在页面加载后调用调整大小过程（我在页面初始化中加载了地图）。
function resize_map()
$('#map-canvas').height($('#map-canvas').height() - $('#head').height());
google.maps.event.trigger(map, "resize");
您还需要注意使用 1px 边框的默认样式。
现在，如果您想添加固定页脚，您还需要在设置高度时从地图画布中减去页脚的高度。页面中还添加了内边距。
下面是我认为你试图完成的代码......
<style type="text/css">
#map-page, #map-canvas width: 100%; height: 100%; padding: 0;
#map-pagepadding-bottom:0px !important;
.ui-header, .ui-footer border-width: 0px 0;
</style>
您的样式，将页面和地图画布设置为 100% 高度，删除由固定页脚添加的底部填充，并摆脱您链接的默认样式的边框...
<script type="text/javascript">
var map;
function resize_map()
$('#map-canvas').height($(window).height() - $('#head').height() - $('#foot').height());
google.maps.event.trigger(map, "resize");
$( document ).on( "pageinit", "#map-page", function()
var latlng = new google.maps.LatLng(-25.363882, 131.044922);
var myOptions =
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker(
position: latlng,
map: map,
title: "Greetings!"
);
$(window).resize(function ()
resize_map();
);
);
$(document).on('pagecontainershow', function()
var pageid = $("body").pagecontainer("getActivePage").prop("id");
if(pageid === "map-page")
resize_map();
);
</script>
脚本绘制地图并在页面显示中调用调整大小，减去页眉和页脚高度。
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a" id="head">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
<div data-role="footer" id="foot" data-position="fixed" data-tap-toggle="false">
<h1>Google Maps V3</h1>
</div>
</div>
您的基本 html 标记。
编辑：如果这是浏览器应用程序，则更改为 window.height。每当调整窗口大小时，您都希望触发调整大小功能。同样，这是为地图设置固定页脚和页眉之间的确切高度。
【讨论】：
以上是关于jquery mobile, google map body 高出 100%的主要内容，如果未能解决你的问题，请参考以下文章
Jquery mobile 和 google maps openinfowidow 加载而不是点击
在 Jquery Mobile 中使用 Google Map 使用现有位置创建自定义选择的位置？
使用 JSON 将 JQuery Mobile 输出到 Google Maps 信息窗口
jQuery Mobile 和 Google Maps API - 地图未加载到设备上