OpenLayers映射行未对齐

Question

我得到了这个OpenLayers项目,我需要使用本地地图服务.

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

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

我正在使用OpenLayers 10.12(7月26日最新稳定版)我也在使用带有bootstrap 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频道,但我没有得到任何回应.

Answer 1

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

问题在于Bootstrap Twitter造型.但是,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;
} 

希望这对其他人有帮助!祝你今天愉快!