jquery mobile，谷歌地图机构高出100％(jquery mobile, google map body 100% higher)

jquery mobile，谷歌地图机构高出100％(jquery mobile, google map body 100% higher) <!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％宽度几次不包括地图画布

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

![enter image description here][2]

I want to do is that the body of the page that will contain the map can visualize 100% both high and wide, but without the head and foot desaparescan, please help with this problem

image is shown as figure want the map, but can not find how to square the canvas map, whenever I add the size 100% higher and 100% width several times the map canvas not included

最满意答案

如果我正确地阅读此内容，您会尝试在标题和固定页脚之间100％拉伸地图。

如果你看看谷歌地图的jquery移动示例，他们的页面容器和地图画布设置为100％高度和标题。这是他们的HTML ...

和css ......

这可以扩展地图，但它增加了（在他们的例子中）由于他们没有考虑的标题而增加44个像素。我在一个项目中添加了一个小脚本来解决这个问题，这需要将地图设置为全局变量并在页面加载后调用resize过程（我在页面init中加载了map）。

function resize_map() { $('#map-canvas').height($('#map-canvas').height() - $('#head').height()); google.maps.event.trigger(map, "resize"); }

您还需要使用1px边框作为默认样式。

现在，如果要添加固定页脚，则还需要在设置高度时从地图画布中减去页脚的高度。页面中还添加了填充。

以下是我认为您要完成的代码...

您的样式，将页面和地图画布设置为100％高度，删除固定页脚添加的底部填充，并删除您链接的默认样式的边框...

脚本绘制地图，在页面上显示我们调用我们的调整大小，减去页眉和页脚高度。

<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">  </div> <div data-role="footer" id="foot" data-position="fixed" data-tap-toggle="false"> <h1>Google Maps V3</h1> </div> </div>

你的基本html标记。

编辑：如果这是一个浏览器应用程序，则更改为window.height。您可能希望在调整窗口大小时触发调整大小功能。再次，这是将地图设置为固定页脚和标题之间的确切高度。

If I'm reading this correctly you're trying to stretch your map 100% between your header and fixed footer.

If you look at the jquery mobile example with google maps they have their page container and map canvas set to 100% height with a header. Here is their html...

and css...

This works as far as stretching the map but it adds (in their example) an extra 44 pixels due to the header that they don't account for. I added a small script to fix this in a project I did a while back, this required setting the map to a global variable and calling a resize procedure once the page was loaded (I loaded map in page init).

function resize_map() { $('#map-canvas').height($('#map-canvas').height() - $('#head').height()); google.maps.event.trigger(map, "resize"); }

There's also in the default style your using a 1px border that you would need to take care of.

Now if you want to add your fixed footer, you would also need to subtract the footer's height from map-canvas when setting the height. There is also padding added to the page.

Below is the code for what I think you were trying to accomplish...

Your styles, setting the page and map canvas to 100% height, removing the bottom padding added by the fixed footer, and getting rid of the border of the default styles you linked...

The script draws the map and on page show we call our resize, subtracting the header and footer height.

<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">  </div> <div data-role="footer" id="foot" data-position="fixed" data-tap-toggle="false"> <h1>Google Maps V3</h1> </div> </div>

Your basic html markup.

Edit: Changed to window.height if this is a browser application. You would want to trigger the resize function whenever the window is resized. Again this is to set the map the exact height between your fixed footer and header.

更多推荐