Question

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

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

这对我来说本身就是一个谜，因为即时通讯在空白网页上使用100％相同的代码进行测试（空白页面只是一个页面上只有地图）并且工作得很好！（截图：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;
}

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

Answer 2

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

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

OpenLayers映射行未对齐

2 个答案: