OpenLayers地圖行不對齊

我得到了這個OpenLayers項目，我需要使用本地地圖服務。OpenLayers地圖行不對齊

我正在遇到的問題：（截圖）http://tinypic.com/r/x38oq1/6

這對我來說本身就是一個謎，因爲IM使用上的一個空白網頁，用於測試目的100％相同的代碼（一個空白頁將與一個頁面只有地圖上），這工作得很好！（截圖：http://tinypic.com/r/20zyxxh/6）

我正在使用OpenLayers 10.12（最新的穩定由26七月）我也使用codeigniter框架與引導Twitter。

如果我使用與指南/教程使用的相同的地圖服務器，地圖顯示效果很好 - 但是當我切換到本地地圖文件夾時失敗。

的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頻道，但我沒有得到任何答覆。

來源

2012-07-26 Christer

所以我找到了解決問題的方法，並且即時通訊發佈，如果其他人遇到同一問題。

問題在於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; 
}

希望這有助於任何人！祝你今天愉快！

來源

2012-07-27 07:01:51 Christer

非常感謝，Christer！剛剛得到相同的東西:-) – walla 2012-09-11 10:39:59

出現同樣的問題，但不想更改我的OpenLayers容器的ID。您可以使用相同的CSS規則修復任意div：

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

來源

2012-12-12 01:02:52 lubar

OpenLayers地圖行不對齊

回答

相關問題