当嵌入jQuery Mobile“页面”内时，Google地图扩展到页面边缘之外。

Question

我正在开发一个小型映射应用程序，其中嵌入了一个Google地图在jQuery Mobile“页面”内。我希望地图占据屏幕的全宽度，但不超过屏幕宽度。问题是，地图在右侧页面边缘“溢出”，大约超出5％。您可以在http://www.codeemporium.com/experiments/map6.html中看到这一点（抱歉，目前Firefox无法显示），您会注意到在地图通常显示“使用条款”的右下角已被裁剪。以下是我使用的主要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_canvas div中。使用我的机器上的Chrome开发人员工具，我可以看到地图画布最终宽度为1295像素，略大于我的屏幕分辨率1280像素减去滚动条等。我遇到的问题是我很少有解决这种想象中的样式问题的经验，甚至可能与上面的代码片段没有直接关系。除了针对这个问题提供一个具体的解决方案外，如果有人能建议如何以一种有条理的方式进行调试这些问题，那也将不胜感激。

- Bryce Thomas

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()或地图初始化中运行resizeMap()。

- Jeremy Battle