javascript - OpenLayers map 行不对齐

Question

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

我遇到的问题:(截图)http://tinypic.com/r/x38oq1/6

这对我来说本身就是一个谜，因为我在空白网页上使用 100% 相同的代码进行测试(空白页将是一个只有 map 的页面)并且工作得很好! (截图:http://tinypic.com/r/20zyxxh/6)

我正在使用 OpenLayers 10.12(7 月 26 日最新稳定版)我也在使用 codeigniter Framework 和 bootstrap twitter。

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

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 channel ，但我在那里没有得到任何回应。

Answer 1

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

问题出在 Bootstrap Twitter 样式中。但是，twitter 团队创建了一个 ID 标签来解决这个问题。使用 ID="map_canvas"解决问题。

在 map 的方 block 上设置某种最大宽度的代码:

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

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