我在Leaflet地图上的固定位置创建了一个自定义弹出窗口。单击一个标记时,我可以关闭弹出窗口,并通过单击另一个标记来打开另一个弹出窗口。但是,当我没有通过单击关闭按钮来关闭弹出窗口,而是单击另一个标记时,弹出内容发生了变化,但是我不再能够通过单击关闭按钮来关闭弹出窗口,它被卡住了。该如何解决?
// Custom marker
var redFlag = L.icon({
iconUrl: 'images/mapmarker2.png',
iconSize: [34, 34],
iconAnchor: [17,34]
});
//geoJSON data, stored in 'art' variable
const myLayer = L.geoJSON(art, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redFlag});
},
onEachFeature: function ( feature, layer) {
layer.on('click', function(e){
var getWrap = document.getElementById('mapid');
var wrap = getWrap.appendChild(document.createElement('div'));
wrap.className = 'wrapper';
wrap.style.backgroundColor = '#fff';
wrap.innerHTML =
`<div class="close">X</div>`+
`<div class="popUpContent" style="background-color:#e8f4ff">` +
`<div class='pic'><img src =
"images/${feature.properties.image}"></div>`+
`<div class="puName"><span
class="puName">${feature.properties.name}</span><br>`+
`<span class="puTitle">"${feature.properties.title}"</span> <br>`+
`<div class="extra3">${feature.properties.extra}</div></div>`+
`</div>`;
if(!feature.properties.title){
wrap.innerHTML =
`<div class="close">X</div>`+
`<div class="popUpContent" style="background-color:#e8f4ff">` +
`<div class='pic'><img src =
"images/${feature.properties.image}"></div>`+
`<div class="puName"><span
class="puName">${feature.properties.name}</span><br>`+
`<div class="extra3">${feature.properties.extra}</div></div>`+
`</div>`;
}
// EventListener attached to close button
document.querySelector('.close').addEventListener('click', closePopup);
function closePopup(e){
if(document.querySelector('.wrapper').style.display = 'block'){
document.querySelector('.wrapper').remove();
}
}
});
}
});
mymap.addLayer(myLayer)