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

したがって、これは Bootstrap と OpenLayers の間の衝突ではなく、正方形のマップ タイルを長方形の境界に誤って適合させたものではありません。

概要は次のとおりです: 1) マップのサイズを正方形に設定しました 2) マップの境界を正方形だと思っていたものに設定しましたが、実際には正方形の幅の約 80% の長方形に設定しました

OpenLayers は、left属性を追加してマップ タイルを圧縮することで、これらを調整しようとしました。

マップの境界を正方形に適切に設定すると、問題はなくなりました。

于 2013-06-13T20:58:57.263 に答える
0

この問題は Openlayers 2.12 でのみ発生すると思います。次の css コードを追加してみてください。

.olMapViewport img {
    max-width: none;
}
于 2013-06-13T17:13:43.880 に答える