将鼠标悬停在侧边栏中的列表项上时会弹出标记

时间:2019-06-03 15:04:30

标签: hover leaflet sidebar marker bounce

当我将鼠标悬停在侧边栏中的相应列表项上时,我希望传单地图上的标记会反弹。如何连接标记和列表项。 列表项和弹出窗口都是动态生成的,它们的属性都存储在同一个geoJSON文件中。

// Dynamically created list items in sidebar

var i = 1;
const buildItemList = (data) =>  {

    for( const el of data){
        var prop = el.properties;


    var listings = document.getElementById('listings');
    var listing = listings.appendChild(document.createElement('div'));
    listing.className = 'item';
    listing.id = 'newItem_' + i++;

    var content = document.createElement('div');
    listing.appendChild(content);
    content.className = 'content';
    content.innerHTML= `<div class="space">${prop.name}</div>`+ 
                        `<span class="info">'Title: "${prop.title}" 
                         </span> 
                         <br>` +
                        `<span class="extra">${prop.extra}<br>Adress: 
                         ${prop.adress}</span><br></div>`;

    if(!prop.extra){
        content.innerHTML = `<div class="space">${prop.name}</div>`+ 
        `<span class="info">'Title: "${prop.title}"</span><br>` +
        `<span class="extra">No Info</span><br>Adress: ${prop.adress} 
         </div>`;
            }

     if(!prop.title){
        content.innerHTML = `<div class="space">${prop.name}</div>`+ 
        `<span class="info"></span>` +
        `<span class="extra2">${prop.extra}<br>Adress: ${prop.adress} 
        </span><div>`;
         }

     }                    

 }

 buildItemList(myArt);


// Markers and popups

const myLayer = L.geoJSON(art, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: redFlag});  

  },
       //Here innerHTML markup for popup

 });

 mymap.addLayer(myLayer);

0 个答案:

没有答案