4

我得到了这个 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 频道，但我没有得到任何回应。

4

2 回答 2

7

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

问题在于 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;
}

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

于 2012-07-27T07:01:51.197 回答
0

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

<style>#mapCanvas img { max-width:none; } /* make Boorstrap work with OpenLayers */</style>
于 2012-12-12T01:02:52.950 回答