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