当嵌入jQuery Mobile“页面”时，Google地图延伸到页面的边缘

我有一个小型的地图应用程序，我正在将一个Google Map嵌入到jQuery Mobile“页面”中。我希望地图占据屏幕的整个水平宽度，但不会再多。我遇到的问题是地图从右侧的页面边缘“溢出”，大约5％。这可以在http://www.codeemporium.com/experiments/map6.html（对不起，目前不会在Firefox中显示）看到，您会注意到，在地图通常所说的“使用条款”的右下角，它已被切断。主jQuery Mobile的“页”我使用的HTML代码摘录如下（可在上述网页的源代码中可以看出）：`当嵌入jQuery Mobile“页面”时，Google地图延伸到页面的边缘

<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股利。使用我的机器上的Chrome开发人员，我可以看到地图画布的最终宽度为1295像素，比我的屏幕的1280像素分辨率减去滚动条等大一点。我遇到的问题是，在解决我所设想的样式问题时，我几乎没有什么经验，甚至可能不直接涉及上面的代码片段。除了针对这个问题的具体解决方案之外，如果有人可以建议如何以某种有条不紊的方式去调试这些类型的东西，那么也会非常感激。

来源

2011-05-06 Bryce Thomas

当我们遇到了这个问题，我们不得不作出这样的功能：

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)});

可以运行resizeMap（）在$（文件）。就绪（），或在您的地图初始化。

来源

2011-05-06 14:35:25

当嵌入jQuery Mobile“页面”时，Google地图延伸到页面的边缘

回答

相关问题