无法在固定位置关闭自定义弹出窗口 [英] Can't close custom popup at fixed position

问题描述

这是javascript初学者的问题. 我在固定位置(传单)创建了一个自定义弹出窗口.单击打开弹出窗口的标记后，我无法通过单击关闭按钮将其关闭.我可以单击一个不同的标记，但是弹出包装器仍保持打开状态，显示附加到每个不同标记的内容.因此，单击标记会更改弹出窗口的内容，但无法通过单击关闭按钮来关闭弹出窗口.
我尝试了一个eventListener. 我需要完成这项工作的那段代码. 任何帮助将不胜感激.

Here is a javascript beginners problem. I created a custom popup at fixed position(leaflet). After clicking a marker that opens the popup I can't close it by clicking the close button. I can click a different marker though , but the popup wrapper remains open showing the content attached to each different marker. So the content of the popup changes by clicking the markers but can't close the popup by clicking the close button.
I tried an eventListener. I need that piece of code that does the job. Any help would be appreciated.

// Adds custom marker

var redFlag = L.icon({
    iconUrl: 'images/mapmarker2.png',
    iconSize: [34, 34],
    iconAnchor: [17,34]
});

// Adds markers and popup
// geoJSON file 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){

// popup content

   var getWrap = document.getElementById('wrapper');
        var wrap = getWrap.appendChild(document.createElement('div'));
        wrap.className = 'wrapper';
        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>`;
         }

// Add eventlistener to the close button

document.querySelector('.close').addEventListener( 'click', closePopup);
      function closePopup(e){

        if(event.target.matches('.close')){
            document.querySelector(".wrapper").style.display='none'
        }else if(document.querySelector(".wrapper").style.display='block'){
            document.querySelector(".wrapper").style.display='none';
           }
         }

       });
    }

});

mymap.addLayer(myLayer)

推荐答案

您要在创建弹出窗口之前为close添加事件侦听器. 您应该在onEachFeature函数的layer.on('click', function(e){...末尾添加此侦听器.

You are adding event listener for close before pop-up is created. You should add this listener at the end of your layer.on('click', function(e){... in the onEachFeature function.

要确保侦听器仅添加一个侦听器，请在添加事件之前使用removeEventListener.

To be sure that listener added only ones, use removeEventListener before adding an event.

这篇关于无法在固定位置关闭自定义弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！