OpenLayers 地图行不对齐答案

【问题标题】：OpenLayers map rows not aligningOpenLayers 地图行不对齐
【发布时间】：2012-07-26 17:30:06
【问题描述】：

我得到了这个 OpenLayers 项目，我需要在其中使用本地地图服务。

我遇到的问题：（截图）http://tinypic.com/r/x38oq1/6

这对我来说本身就是一个谜，因为我在空白网页上使用 100% 相同的代码进行测试（空白页将是一个只有地图的页面），而且效果很好！（截图：http://tinypic.com/r/20zyxxh/6）

我正在使用 OpenLayers 10.12（7 月 26 日最新稳定版）我也在使用带有引导 twitter 的 codeigniter 框架。

如果我使用与指南/教程相同的地图服务器，地图会显示得很好 - 但当我切换到本地地图文件夹时失败。

JavaScript 代码：

      <script defer="defer" type="text/javascript">
    var map = new OpenLayers.Map('map');
    var tms = new OpenLayers.Layer.OSM( 
        "OSM Layer",
        "./assets/map/WholeWorld256-8bit/${z}/${y}-${x}.png",
        {layers: 'basic'} );
    map.addLayer(tms);
    map.zoomToMaxExtent();
  </script>

如果有人知道为什么会这样，那就太好了！

我也尝试了 IRC 频道，但我没有得到任何回应。

【问题讨论】：

标签： javascript codeigniter twitter-bootstrap openlayers

【解决方案1】：

所以我找到了问题的解决方案，如果其他人遇到同样的问题，我会发布它。

问题在于 Bootstrap Twitter 样式。但是，推特团队已经创建了一个 ID 标签来解决这个问题。使用 ID="map_canvas" 解决问题。

在地图的瓦片上放置某种最大宽度的代码：

Bootstrap.css - 第 64-74 行：

img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

解决方法见第 76-78 行(boostrap.css)：

#map_canvas img {
  max-width: none;
}

希望这对其他人有帮助！祝你有美好的一天！

【讨论】：

【解决方案2】：

遇到了同样的问题，但不想更改我的 OpenLayers 容器的 ID。您可以使用相同的 CSS 规则修复任意 div：

<style>#mapCanvas img { max-width:none; } /* make Boorstrap work with OpenLayers */</style>

【讨论】：