Как запретить leaflet.js прокручивать страницу при масштабировании

27.01.2022

1811

Если карта Leaflet выходит за границы области просмотра окна браузера, то при нажатии на кнопки зума, страница прокручивается к началу карты. В итоге страница постоянно прыгает – такое поведение не удобно и раздражает.

Обсуждение темы на https://github.com/Leaflet/Leaflet/issues/4125.

Данный баг проявляется в Chrome и других браузерах на основе Chromium:

При масштабировании Leaflet страница прокручивается к началу

Решение

Проблема заключается в необходимости держать контейнер карты в фокусе, чтобы события клавиатуры направлялись через него. Клик по кнопке масштабирования переводил бы фокус на саму кнопку и поведение карты было бы неправильным.

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

L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};

Полный пример инициализации карты:

<div id="map"></div>

<style type="text/css">
#map {
	width: 100%;
	height: 1000px;
}
</style>

<link rel="stylesheet" href="/leaflet/leaflet.css">
<script src="/leaflet/leaflet.js"></script>

<script>
L.Control.prototype._refocusOnMap = function _refocusOnMap(ev) {
	if (this._map && ev && ev.screenX > 0 && ev.screenY > 0) {
		this._map.getContainer().focus({ preventScroll: true });
	}
};

var map = L.map('map', {
	center: [38.89, -77.03],
	zoom: 5,
	minZoom: 1,
	maxZoom: 18
});
 
var tiles = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([38.89, -77.03]).addTo(map);
</script>

HTML

Результат: