当嵌入在jQuery Mobile“page”中时，Google Map扩展到页面边缘。 [英] Google Map extends off edge of page when embedded inside jQuery Mobile "page"

问题描述

我有一个小地图应用程序，我正在工作，嵌入一个谷歌地图内部的jQuery Mobile页面。我想让地图占据屏幕的整个水平宽度，但没有更多。我所遇到的问题是，地图从页面边缘的溢出在右边，也许5％左右。这可以在 http://www.codeemporium.com/experiments/map6.html（对不起，不会在Firefox中显示），你会注意到，在右下角的地图通常说使用条款，它已被切断。我使用的主要jQuery Mobile页面的HTML代码摘录如下（在上述页面的源代码中可以看到）：`

I have a small mapping application I'm working on that embeds a Google Map inside of a jQuery Mobile "page". I want the map to take up the full horizontal width of the screen, but no more. The problem I am having is that the map "overflows" off the edge of the page on the right hand side, by maybe 5%-ish. This can be seen at http://www.codeemporium.com/experiments/map6.html (sorry, won't show in Firefox just yet) where you will notice that in the bottom right hand corner where the map normally says "Terms of Use", it has been cut off. The HTML code excerpt for the main jQuery Mobile "page" I'm using is as follows (as can be seen in the aforementioned page's source code):`

<div data-role="page" style="width:100%; height:100%;" id="main_page"> 


<div data-role="content" id="map_canvas" style="width:100%;height:80%;">  
</div> 

<div data-role="footer" style="width:100%;height:20%;"> 
  <div data-role="navbar"> 
<ul> 
  <li><a href="#welcome" data-icon="info" data-iconpos="notext"></a></li> 
  <li><a href="#settings" data-icon="gear" data-iconpos="notext"></a></li> 
  <li><a href="#tracking" data-icon="alert" data-iconpos="notext"></a></li> 
      <li><a href="#search" data-icon="search" data-iconpos="notext"></a></li> 
</ul> 
  </div><!-- /navbar --> 
</div> 

`

到 map_canvas div中。在我的机器上使用Chrome开发者我可以看到，地图画布的结果是1295像素宽，这是一个比我的屏幕减去滚动条等1280像素分辨率。我遇到的问题是，我有很少的经验，故障排除我想象中的是一个造型问题，甚至可能不直接涉及上面的代码段。除了这个问题的一个特定的解决方案，如果有人可以建议如何去以某种有条不紊的方式调试这些类型的东西，这将是非常感激。

The map is being injected into the map_canvas div. Using the Chrome developer on my machine I can see that the map canvas ends up being 1295 pixels wide, which is a tad larger than the 1280 pixel resolution of my screen minus scroll bar etcetera. The problem I am having is that I have very little experience in troubleshooting what I imagine here is a styling issue, and may not even pertain directly to the code snippet above. In addition to a specific solution to this problem, if someone could suggest how to go about debugging these kind of things in some kind of methodical manner, it would also be much appreciated.

推荐答案

当我们遇到这个问题，我们必须使这个函数：

When we ran into this issue we had to make this function:

function resizeMap () {
    $('#map_canvas').height($(window).height()-$('#map_head').height()); 
    // in your case #map_head would be .ui-navbar I believe
}
$(window).resize(function(){resizeMap(); map.setCenter(latlng)});

您可以在$（document）.ready（）中或在映射初始化中运行resizeMap（）。

you can run resizeMap() in $(document).ready() or in your map initialization.

这篇关于当嵌入在jQuery Mobile“page”中时，Google Map扩展到页面边缘。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！