传单osm映射和extjs4门户渲染问题

我正在尝试使用ExtJS4和传单创建一个带有map的简单portlet。 问题是map并没有完全出现在我的portlet元素中。 它从我的portlet中加载了一些错误的tile（256x256）。这种错误的瓷砖在左侧较高，右侧较低。 有什么窍门可以修吗？ 在屏幕截图上显示它的样子。

也许这能帮你找到答案？ 我认为这是因为img类中错误的

left

和

top

属性造成的：

<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;">

---

面板完全呈现后，需要调用

L.Map

的

invalidateSize

方法：

检查贴图容器大小是否更改，如果更改，则更新贴图-在动态更改贴图大小后调用它，默认情况下也会设置平移动画

我不是ExtJS专家，但我快速浏览了一下API，在我看来，您可以通过监听

afterRender

事件来实现这一点，该事件在

Ext.panel.panel

上触发：

在组件渲染完成后激发

编辑：找到这个例子，他们在

Ext.panel.panel

的afterRender函数中初始化Google地图。这样做的原因相同：此时可以确定面板的大小，这是正确初始化映射实例所必需的：

编辑2：因为OP说上面没有解决方案，所以我修改了google示例，使用传单，并在Plunker上创建了一个测试用例：

---

面板完全呈现后，需要调用

L.Map

的

invalidateSize

方法：

检查贴图容器大小是否更改，如果更改，则更新贴图-在动态更改贴图大小后调用它，默认情况下也会设置平移动画

我不是ExtJS专家，但我快速浏览了一下API，在我看来，您可以通过监听

afterRender

事件来实现这一点，该事件在

Ext.panel.panel

上触发：

在组件渲染完成后激发

编辑：找到这个例子，他们在

Ext.panel.panel

的afterRender函数中初始化Google地图。这样做的原因相同：此时可以确定面板的大小，这是正确初始化映射实例所必需的：

编辑2：因为OP说上面没有解决方案，所以我修改了google示例，使用传单，并在Plunker上创建了一个测试用例：

---

方法invalidateSize（）解决我的问题。我把它放在map resize事件上。

方法invalidateSize（）解决了我的问题。我把它放在地图调整事件上。

顺便说一句。如果我将浏览器窗口移动到另一个显示器上，它就开始正常工作。当我更改浏览器窗口大小时，它也开始正常工作。所以，问题可能是如何强制刷新浏览器窗口的大小？L.map侦听窗口大小调整并在内部调用

invalidateSize

。因此，如果调整浏览器窗口的大小恢复了正确的行为，iH8的猜测可能是正确的。如果我将浏览器窗口移动到另一个显示器上，它就开始正常工作。当我更改浏览器窗口大小时，它也开始正常工作。所以，问题可能是如何强制刷新浏览器窗口的大小？L.map侦听窗口大小调整并在内部调用

invalidateSize

。因此，如果调整浏览器窗口的大小恢复了正确的行为，iH8的猜测可能是正确的。如果我是你，我会再看一眼。您所描述的是

L.Map

实例无法正确确定其维度的典型标志。这可以通过在容器完全呈现时初始化或在容器完全呈现时调用

invalidateSize

来解决。谢谢，我将在明天尝试。）如果我是你，我会再看一眼。您所描述的是

L.Map

实例无法正确确定其维度的典型标志。这可以通过在容器完全呈现时初始化或在容器完全呈现时调用

invalidateSize

来解决。谢谢，我将在明天尝试。）