2015-12-22 64 views
0

我想創建一個簡單的portlet與地圖使用extjs 4和傳單。 問題是map並沒有完全出現在我的portlet元素中。 它加載了一些錯誤的圖塊(256x256),它們不在我的portlet中。這個錯誤的瓷磚在左側較高,在右側較低。 有沒有什麼竅門可以解決它? 這裏的截圖如何看起來很喜歡。 problem with tiles小葉osm地圖和extjs4門戶渲染問題

也許這可以幫助找出? 我想這是因爲錯誤的lefttop屬性在IMG類:

<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5121/" style="height: 256px; width: 256px; left: -79px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9905/5123/" style="height: 256px; width: 256px; left: 177px; top: 261px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5122/" style="height: 256px; width: 256px; left: -79px; top: 5px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9903/5121/" style="height: 256px; width: 256px; left: -335px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5121/" style="height: 256px; width: 256px; left: -591px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5120/" style="height: 256px; width: 256px; left: -591px; top: -507px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5120/" style="height: 256px; width: 256px; left: -847px; top: -507px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5119/" style="height: 256px; width: 256px; left: -847px; top: -763px;"> 
+0

並順便說一句。 如果我將瀏覽器窗口移動到另一臺顯示器,它將開始正常工作。 – Kirill

+0

而當我改變瀏覽器的窗口大小時,它也開始正常工作。 所以可能的問題是如何強制瀏覽器窗口的刷新大小? – Kirill

+0

L.map偵聽窗口大小並在內部調用'invalidateSize'。因此,如果調整瀏覽器窗口大小以恢復正確的行爲,iH8的猜測可能是正確的。 – ghybs

回答

3

你需要調用L.MapinvalidateSize方法後,您的面板完全呈現:

檢查,如果地圖容器大小發生變化並更新地圖 - 如果在動態更改地圖大小後調用它,默認情況下也會啓用平移。

http://leafletjs.com/reference.html#map-invalidatesize

我沒有ExtJS的專家,但我採取了快速瀏覽一下API,並在我看來,你可以做,通過偵聽afterRender事件偉馳是在Ext.panel.Panel觸發:

組件渲染完成後觸發。

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-event-afterrender

編輯:發現這個例子中,他們在Ext.panel.Panel一個一個AfterRender函數初始化一個谷歌地圖。這是由於相同的原因完成的:在該點的面板的尺寸可以被確定是用於正確地初始化地圖實例的必要性:

http://docs.sencha.com/extjs/4.0.7/#!/example/window/gmap.html

EDIT 2:因爲OP所述無關以上是溶液我修改了谷歌例使用單張和上創建Plunker測試用例:()

http://embed.plnkr.co/Fo9nOYH3KUHRqw4Soq6F/

+0

感謝您的建議,但不起作用。 – Kirill

+0

如果我是你,我會再看一眼。你所描述的是'L.Map'實例不能正確確定它的尺寸的經典標誌。這可以通過初始化容器完全呈現時的初始化或者當容器完全呈現時調用'invalidateSize'來解決。 – iH8

+0

添加Plunker與例子,作品像魅力:) – iH8

0

方法invalidateSize解決我的問題。我把它放在地圖調整大小事件。