Всплывающее окно "Центр листов" и маркер к карте

Я хочу центрировать мой маркер на всплывающем окне.. и центрировать карту не в маркере, а в центре маркера и всплывающего окна! Проблема в том, что всплывающее окно имеет динамический контент (загружается при нажатии).

Размер карты - полный размер дисплея в мобильном устройстве! я просто использовал опцию autoPanPadding во всплывающем окне, но этого недостаточно

Обратитесь к следующей фотографии:

popup centered in leaflet map

Это решение интегрировано в код платформы KeplerJs.

Ответ 1

Используя ответ fitzpaddy, я смог создать этот код, который работает и является гораздо более гибким.

map.on('popupopen', function(e) {
    var px = map.project(e.target._popup._latlng); // find the pixel location on the map where the popup anchor is
    px.y -= e.target._popup._container.clientHeight/2; // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
    map.panTo(map.unproject(px),{animate: true}); // pan to new center
});

Ответ 2

Чао Стефано,

Это непроверенный псевдокод, но функции Leaflet project/unproject должны помочь.

то есть;

// Obtain latlng from mouse event
var latlng;
// Convert latlng to pixels
var px = project(latlng);
// Add pixel height offset to converted pixels (screen origin is top left)
px.y -= mypopup.height/2
// Convert back to coordinates
latlng = unproject(px);
// Pan map
map.panTo(latlng,{animate: true});

Это зависит от того, является ли масштаб увеличения постоянным во время расчета, поэтому вам может потребоваться панорамировать карту, а затем рассчитать смещение панорамирования для корректного обновления (используя анимацию, это будет только плавный переход).

Удачи!

Ответ 3

Здесь простое решение:

Сначала вы центрируете карту маркером.

map.setView(marker.latLng);

Затем вы открываете всплывающее окно.

var popup.openOn(map); = L.popup()
    .setLatLng(marker.latLng)
    .setContent(dynamic-content)
    .openOn(map);

Листовка автоматически панорамирует карту, чтобы всплывающее окно соответствовало карте. Чтобы сделать ее более красивой, вы можете добавить всплывающее окно с CSS.