0

我正在使用 Twitter Bootstrap 和 Open Layers 在页面上显示地图：

http://tinypic.com/r/2qu826t/5

地图应该在 div 的左侧和上方 100 像素处id="OpenLayers.Layer.Image_84"（蓝色轮廓）。

它也应该是 1024 像素宽；相反，它被截断为大约 823。

结果可以在包含地图图块（1024x1024 png）的 div 中看到：

<img class="olTileImage" style="visibility: inherit; opacity: 1; position: absolute; left: 101%; top: 0%; width: 822.944%; height: 1024%;" src="/static/img/maps/seattle.png"

如果我手动更改为left:101%一切看起来都正确left:1%。但我不知道是什么以编程方式导致这是错误的。width:822.944%width:1024%

此外，我在非 Bootstrap 沙箱中使用了完全相同的代码，并且运行良好。因此，我的假设是与 Bootstrap 的冲突导致了这种情况。

有人有想法么？

4

2 回答 2

0

我认为这个问题只发生在 Openlayers 2.12 上。尝试添加这个 css 代码：

.olMapViewport img {
    max-width: none;
}
于 2013-06-13T17:13:43.880 回答
0

所以这不是 Bootstrap 和 OpenLayers 之间的冲突，而是将方形地图块错误地拟合到矩形边界。

这是一个概述：1）我将地图大小设置为正方形 2）我将地图边界设置为我认为的正方形，但实际上是一个矩形，其宽度约为正方形的 80%

OpenLayers 试图通过添加left属性和压缩地图图块来协调这些。

当我正确地将地图边界设置为正方形时，问题就消失了。

于 2013-06-13T20:58:57.263 回答