调整单张地图大小时，如何保持地图居中? [英] When resizing a leaflet map how can I keep the map centered?

问题描述

我正在使用 leaftlet 在网页上创建地图.

I'm using leaftlet to create a map on a web page.

地图的左侧是一个滑出的面板.

On the left hand side of the map is a panel that slides out.

当面板滑出时，将调整地图大小以填充页面上的剩余空间.

When the panel slides out the map is resized to fill the remaining space on the page.

当面板滑到左侧地图时，中心点将移至左侧.

As the panel slides out to the left map resizes the centre point moves to the left.

理想情况下，地图的中心点应保持在相对中心.

Ideally the centre point of the map should remain in the relative centre.

狡猾的ASCII表示形式: (."代表地图的初始中心点.)

Dodgy ASCII representation: (The '.' represents the initial centre point of the map.)

Panel closed:          [][    .    ]

Panel open (current):  [  ][     . ]

Panel open (desired):  [  ][   .   ]

这是再现问题的 jsFiddle .

推荐答案

我在传单地图大小更改后通过调用 $(window).resize() 解决了此问题

I solved this by calling $(window).resize() after the leaflet map size changes

更新:您似乎需要致电map.invalidateSize()

Update: Looks like you need to call map.invalidateSize() instead

更新了小提琴 http://jsfiddle.net/YwbLg/11/(动画不是漂亮)

Updated fiddle http://jsfiddle.net/YwbLg/11/ (animation isn't pretty)

这篇关于调整单张地图大小时，如何保持地图居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！