javascript - Mapbox -bindPopup，在 div 中加载内容

Question

如何构建一个可以运行在变量中构建的函数的链接？当我单击图层并加载弹出窗口时，我尝试在 map 下的另一个 div 中填充一些 geoJSON 数据。到目前为止，我可以让弹出窗口正常工作，但是如何构建 onclick 事件来加载 map 下方另一个 div 中的完整描述？

"headline": "Flash Flood Warning issued July 28 at 7:10PM MST expiring July 28 at 10:00PM MST by NWS Flagstaff AZ",
"description": "The National Weather Service in Flagstaff has issued a\n\n* Flash Flood Warning for...\nYavapai County in west central Arizona...\n\n* Until 1000 PM MST\n\n* At 704 PM MST, Doppler radar indicated thunderstorms producing\nheavy rain across the warned area. Portions of the warned area\nhave received one to two inches of rain in a 30 minute period. The\nheaviest rain has been just north of Crown King, along Turkey\nCreek west of Cordes, and the area just northeast of Black Canyon\nCity.\n\nFlash flooding is expected to begin shortly.\n\n* Some locations that will experience flooding include...\nCordes Junction, Bumble Bee, Cordes Lakes, Crown King, Black Canyon\nCity, Rock Springs, Castle Hot Springs, Wagoner, Cordes, Turney\nGulch Group Campground and Hazlett Hollow Campground.\n\nThis includes the following streams and drainages...Poland Creek...\nSycamore Creek...Bitter Creek...Castle Creek...Squaw Creek...Turkey\nCreek...Tuscumbia Creek...Black Canyon Creek...Big Bug\nCreek...Blind Indian Creek...Agua Fria River...Wolf Creek.\n\nThis includes the following highways...\nState Route 69 between mile markers 263 and 264.",

jQuery.ajax({
    type: "GET",
    dataType: "json",
    url: "https://api.weather.gov/alerts?active=1&event=Flood%20Warning,Flash%20Flood%20Warning,Flood%20Watch,Flash%20Flood%20Watch",
    error: function (err) { console.log(err)},
    success: function (data, status, xhr) {
        jQuery(data.features).each(function(index, i) {
            console.log(i.properties.headline);
        });
        console.log(data.features.length);
        L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.event+"<br>"+feature.properties.headline+"<br>");
            }
        }).addTo(map);
    }
})

我不知道如何让它填充 map 下方的 div 中的标题和描述。 l.GeoJson没有点击事件吗？我尝试使用 onclick='function('"+myFunction+"')' 创建一个变量，但是 '"出现了一些问题，并且它不断中断。有什么想法吗？

Answer 1

如果我正确理解你的问题，这里有一个简单的方法来做到这一点。在图层上绑定(bind)一个 click 事件，如下所示:

L.geoJson(data, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.event+"<br>"+feature.properties.headline+"<br>");
        layer.on({
            click: function (e) {
                //Do what you need in your div
                // You have full access to your feature properties
            }
        });
    }
}).addTo(map);

当您单击任何这些功能时，您将触发该事件。