Я хочу центрировать мой маркер на всплывающем окне.. и центрировать карту не в маркере, а в центре маркера и всплывающего окна! Проблема в том, что всплывающее окно имеет динамический контент (загружается при нажатии).
Размер карты - полный размер дисплея в мобильном устройстве! я просто использовал опцию autoPanPadding во всплывающем окне, но этого недостаточно
Обратитесь к следующей фотографии:
Это решение интегрировано в код платформы KeplerJs.
Используя ответ 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
});
Чао Стефано,
Это непроверенный псевдокод, но функции 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});
Это зависит от того, является ли масштаб увеличения постоянным во время расчета, поэтому вам может потребоваться панорамировать карту, а затем рассчитать смещение панорамирования для корректного обновления (используя анимацию, это будет только плавный переход).
Удачи!
Здесь простое решение:
Сначала вы центрируете карту маркером.
map.setView(marker.latLng);
Затем вы открываете всплывающее окно.
var popup.openOn(map); = L.popup()
.setLatLng(marker.latLng)
.setContent(dynamic-content)
.openOn(map);
Листовка автоматически панорамирует карту, чтобы всплывающее окно соответствовало карте. Чтобы сделать ее более красивой, вы можете добавить всплывающее окно с CSS.