Question

我正在制作一个小型地图应用程序，它在jQuery Mobile“页面”中嵌入了Google Map。我希望地图占据屏幕的完整水平宽度，但不多了。我遇到的问题是地图在右边的页面边缘“溢出”，可能是5％-ish。这可以在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像素分辨率减去滚动条等大一点。我遇到的问题是，我在解决我想象的样式问题方面的经验很少，甚至可能不直接与上面的代码片段有关。除了这个问题的具体解决方案之外，如果有人可以建议如何以某种有条不紊的方式调试这些事情，那么也会非常感激。

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（）。

嵌入在jQuery Mobile“页面”中时，Google Map延伸到页面边缘

1 个答案: