При изменении размера карты-листовки как я могу сохранить карту в центре?

Я использую leaftlet для создания карты на веб-странице.

На левой стороне карты находится панель, которая выдвигается.

Когда панель выдвигается, карта изменяется, чтобы заполнить оставшееся пространство на странице.

По мере того, как панель сдвигается влево, карта меняет размер, центральная точка перемещается влево.

В идеале центральная точка карты должна оставаться в относительном центре.

Сомнительное представление ASCII: (Этот '.- представляет первоначальный центр точка на карте.) 

Panel closed:          [][    .    ]

Panel open (current):  [  ][     . ]

Panel open (desired):  [  ][   .   ]

И вот jsFiddle, который воспроизводит проблему.

2 3
leaflet

2 ответа:

Я решил эту проблему, позвонив $(window).resize() после листовки размер карты меняется

Update: Похоже, вам нужно вызвать map.invalidateSize() вместо

Обновленная скрипка http://jsfiddle.net/YwbLg/11/ (анимация не очень хороша)

3

Глядя на ваш JSFiddle, если вы проверите элемент (щелкните правой кнопкой мыши опцию в Chrome) на DIV, который содержит карту, #map-containerDiv, вы увидите, что когда опции DIV, #mapOptions, скользят вправо, карта div фактически перемещается вправо и не изменяется.

Другими словами, центральная точка карты фактически не меняется.
Карта div просто скользит вправо, и правая сторона div становится скрытой.
0