css - 当嵌入到 jQuery Mobile "page"中时，Google map 会超出页面边缘

Question

我有一个正在开发的小型 map 应用程序，它在 jQuery Mobile“页面”中嵌入了 Google map 。我希望 map 占据屏幕的整个水平宽度，但仅此而已。我遇到的问题是 map 在右侧页面边缘“溢出”了 5% 左右。这可以在 http://www.codeemporium.com/experiments/map6.html 看到(抱歉，目前还不会在 Firefox 中显示)您会注意到在 map 通常显示“使用条款”的右下角，它已被截断。我正在使用的主要 jQuery Mobile“页面”的 HTML 代码摘录如下(可以在上述页面的源代码中看到):`

<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 被注入(inject)到 map_canvas div 中。在我的机器上使用 Chrome 开发人员，我可以看到 map Canvas 最终为 1295 像素宽，这比我的屏幕减去滚动条等的 1280 像素分辨率稍大。我遇到的问题是我在解决我想象的样式问题方面经验很少，甚至可能与上面的代码片段不直接相关。除了这个问题的具体解决方案之外，如果有人可以建议如何以某种有条不紊的方式着手调试这类事情，我们也将不胜感激。

Answer 1

当我们遇到这个问题时，我们不得不制作这个功能:

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() 或您的 map 初始化中运行 resizeMap()。