Ответ 1
Проблема в том, что #map-nav
существует в совершенно ином контексте стека, чем маркер и его всплывающее окно.
То, как вы сейчас это настроили, вся карта находится за #map-nav
. Таким образом, изменение z-index на #map-nav
или .leaflet-popup-pane
не поможет.
Отказ от ответственности: это ужасный, ужасный взлом. Если вы загляните в документацию Leaflet и найдете способ добавить свои собственные виджеты, я настоятельно рекомендую сделать это вместо этого.
Тем не менее, у меня есть кое-что, что работает (ваш пробег может варьироваться):
- Переместить
#map-nav
в.leaflet-map-pane
- Создайте
MutationObserver
и наблюдайте за изменениями атрибутов.leaflet-map-pane
. - Всякий раз, когда
.leaflet-map-pane
атрибутstyle
.leaflet-map-pane
, захватите его свойствоstyle.transform
и извлеките значения x и y. Инвертируйте эти значения и примените их к#map-nav
.
var map = L.map('map-content', {
zoomControl: false
}).setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a> contributors, <a href="#" onclick="location.href='http://creativecommons.org/licenses/by-sa/2.0/'; return false;">CC-BY-SA</a>, Imagery © <a href="#" onclick="location.href='http://mapbox.com'; return false;">Mapbox</a>',
maxZoom: 18,
id: 'rauschundrausch.cih3gisks00r8rlly0ob5s2me',
accessToken: 'pk.eyJ1IjoicmF1c2NodW5kcmF1c2NoIiwiYSI6ImNpaTYyeW14MTAwNml2eW0zcmR6aHIzdDcifQ.6T8nzYq49rFnvcqk6lgYPg'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("this is a<br>large<br>popup<br>in<br>terms of height");
var mapNav = document.getElementById("map-nav");
var mapPane = document.querySelector(".leaflet-map-pane");
var rxTranslate = /translate(?:3d)?\(([^\)]+)\)/i;
mapPane.appendChild(mapNav);
var observer = new MutationObserver(function(mutations) {
if (mutations.some(m => m.attributeName === "style")) {
// apply an inverse transform
mapNav.style.transform = "translate(" + mapPane
.style
.transform
.match(rxTranslate)[1]
.split(",")
.slice(0, 2) /* extract only x and y; discard z */
.map(n => parseFloat(n) * -1 + "px") /* invert values */ + ")";
}
});
observer.observe(mapPane, {
attributes: true
});
#map {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#map-nav {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: #ccc;
z-index: 200;
box-shadow: inset 0 0 0 1px #f00;
}
#map-content {
width: 100%;
height: 100%;
}
.leaflet-popup-pane {
z-index: 3;
}
<link rel="stylesheet" href="#" onclick="location.href='https://unpkg.com/