如何在Leaflet地图弹窗外部DIV中显示选中标记的信息

Leaflet 每个Marker实例都支持标准的事件绑定，直接给标记注册click事件监听，触发时把对应点位的数据写入目标DOM节点即可，不需要依赖内置的Popup弹窗。 #

修改要点 #

• 不需要默认弹窗的话，直接删除原有代码中.bindPopup()的调用即可；需要保留弹窗同步展示的话留着也不冲突。
• 循环生成标记时，给每个Marker绑定点击回调，回调中拿到当前点位的属性，组装成需要的内容格式，写入#text_info容器。
• 注意循环中要缓存当前遍历的点位对象，避免闭包导致所有标记都拿到最后一个点位数据的问题。

修改后可直接运行的核心代码 #

var sites = [
{
    "lat": 38.608491,
    "lng": -90.156654,
    "area": "South End Sites (South of Broadway, west of and including 10th)",
    "intersection": "",
    "address": "1535 Tudor Avenue",
    "notes": "True Light Baptist Church",
    "description": "The bell of this church rang as both warning and call to arms in 1917. The violence that erupted on July 2 was long-simmering. For months ahead of time, the African American community prepared for the possibility of violence, and part of that preparation was the use of church bells as a warning that trouble was imminent. Whites harassed the South End neighborhood regularly over that summer. On the night of July 1, a carload of assailants drove along Market Street while firing shots into homes. The church bell rang out, calling the community to defend itself. Armed African Americans came into the streets to defend their neighborhood, and it was this particular response that was presented at trial as evidence that African Americans, not whites, started the conflict."
},
{
    "lat": 38.608857,
    "lng": -90.151939,
    "area": "South End Sites (South of Broadway, west of and including 10th)",
    "intersection": "",
    "address": "1700 Bond Avenue",
    "notes": "Leroy Bundy Home Site",
    "description": "Dr. Leroy Bundy was a leader of the African-American community in 1917. He lived near here at 1700 Bond Avenue. He stood trial for causing the riot and was found guilty on false testimony. He was sentenced to life in prison, but was exonerated by the Illinois Supreme Court."
}
];

// 初始化地图
var map = L.map('map__riot').setView([38.6245, -90.1506], 14);

// 加载底图
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
    attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    minZoom: 10,
    maxZoom: 16,
    ext: 'png'
}).addTo(map);

// 如需操作标记实例可以提前定义数组存储
var markers = [];

// 循环生成点位标记
for (var i = 0; i < sites.length; i++ ) {
    var currentSite = sites[i];
    var marker = new L.marker([currentSite.lat, currentSite.lng])
        // 不需要默认弹窗就删除下面这行
        .bindPopup('<p class="popup__header">'+ currentSite.address + '</p><p class="popup__description">' + currentSite.description + '</p>')
        // 绑定点击事件
        .on('click', function() {
            // 自定义要展示的内容结构，可根据需求调整样式
            var displayHtml = `
                <h4>${currentSite.address}</h4>
                <p class="note"><em>${currentSite.notes}</em></p>
                <p>${currentSite.description}</p>
            `;
            // 将内容写入外部DIV容器
            document.getElementById('text_info').innerHTML = displayHtml;
        })
        .addTo(map);
    
    markers.push(marker);
}

// 可选：页面加载后默认展示第一个点位的内容
// markers[0].fire('click');

// 可选：点击地图空白处清空展示内容
// map.on('click', function(e) {
//     if (!e.layer || !e.layer.feature) {
//         document.getElementById('text_info').innerHTML = '';
//     }
// });

补充说明 #

你可以根据自己的需求修改displayHtml的结构，给外部容器加对应的CSS样式就能实现和页面设计一致的展示效果，不需要额外引入Leaflet插件。 #

内容的提问来源于stack exchange，提问作者Lowlowlow