如何编辑绑定到多边形对象的弹出窗口

Question

目前，无论我在哪里点击地图，都会出现一个带有国家名称的弹出窗口。国家由 geoJSON 文件确定，该文件具有名称和 multi-polygon lnglat 坐标，为每个国家/地区设置边界以节省我单独输入每个国家/地区的时间。

但是，我希望每个弹出窗口绑定到一个传单多边形，以显示从不同 API（如 REST 国家和受保护的星球）提供的各种信息量。不过，我似乎无法弄清楚如何。我更愿意在页面加载时执行此操作，就好像我每次用户点击一个国家时都这样做，这可能会导致每次点击一个国家时调用 API 的不必要等待时间。

基本上我希望代码如下所示：用户点击国家/地区（multi-polygon 对象）-> 绑定到该功能/对象的弹出窗口具有在页面加载开始时调用的与该国家/地区相关的数据（通过名称或PHP 例程中的 ISO_a2）或者当用户单击对象时，调用一个函数来检索该信息并使用该信息填充弹出窗口。

---

//Populating <select>
$(function () {
    $.get('libs/json/countryBorders.geo.json').done(function (data) {
      data.features.forEach(function (feature) {
        $("<option>", {
          value: feature.properties.iso_a2,
          text: feature.properties.name
        }).appendTo("#countrySelect");
      });
    });
});
console.log("Select Function Loaded.");

//Mapping Borders + Popups
function addDataToMap(data, mymap) {
    var myStyle = {
        "color": "#36454f",
        "weight": 2,
        "opacity": 0,
        "fillOpacity": 0
    };
    L.geoJson(data, {
            style: myStyle,

            onEachFeature: function (feature, mymap) {
                var popupFeatureName = feature.properties.name;
                var popup = L.popup()
                    .setContent
                        (
                        "<div id='popupContent'>" 
                        + popupFeatureName + 
                        "</div>"
                        )
                    .openOn(mymap);
                var popupOptions =
                    {
                    'maxWidth': '500',
                    'className' : 'custom'
                    }
                mymap.bindPopup(popup, popupOptions)
        }
    }).addTo(mymap);
    
};
$.getJSON("libs/json/countryBorders.geo.json", function(data) { addDataToMap(data, mymap); });

Answer 1

就上下文而言，我是这个问题的原作者。

我设法通过严格的反复试验解决了我的问题，并制定了一个可行的，尽管是一段复杂的代码。

最大的问题是 Leaflet.js 的弹出内容只能接受一个字符串。因此，即使在 onEachFeature 之外定义变量也会产生关于将值设置为 null 的错误，并且函数将不起作用，或者我会收到诸如“appendChild 不是函数”之类的错误。

由于这种复杂性，我不得不尝试创建一种解决方法，从而产生 3 种不同的解决方案。

---

我将按时间顺序列出我的 3 个解决方案：

//Initial Attempt
/*"<table><tr><th class='display-4'>" + f.properties.name + "</th></tr>" + 
"<tr><td class='font-weight-bold'>Capital:</td><td>" + result["capital"] + "</td></tr>" +
"<tr><td class='font-weight-bold'>Population:</td><td>" + popStr + "</td></tr>" +
"<tr><td class='font-weight-bold'>Demonym:</td><td>" + result["demonym"] + "</td></tr>" +
"<tr><td class='font-weight-bold'>Languages:</td><td>" + result["languages"] + "</td></tr>" +
"<tr><td class='font-weight-bold'>Region:</td><td>" + result["region"] + "</td></tr>";*/

---

虽然表格方法有效，但它并不那么容易阅读，因此我决定更改我的 CSS 样式以使用 Bootstrap，这样更容易将每一行指定为 div。

//Second Attempt
/*"<div class='container' id='appendButton'>" +
     "<div class='h3'>" + f.properties.name + "</div>" +
     "<div class='row'>" +
        "<div class='col'>Capital:</div>" +
        "<div class='col'>" + result["capital"] + "</div>" +
     "</div>" +
     "<div class='row'>" +
        "<div class='col'>Population:</div>" +
        "<div class='col'>" + popStr + "</div>" +
     "</div>" +
     "<div class='row'>" +
         "<div class='col'>Demonym:</div>" +
         "<div class='col'>" + result["demonym"] + "</div>" +
      "</div>" +
      "<div class='row'>" +
         "<div class='col'>Language:</div>" +
         "<div class='col'>" + result["languages"] + "</div>" +
      "</div>" +
      "<div class='row'>" +
         "<div class='col'>Region:</div>" +
         "<div class='col'>" + result["region"] + "</div>" +
      "</div><br/>" + "<button onclick='getProtectedPlanetAPI(f)' id='APIButton'>Protected Planet</button>" + //Button didn't work
      "</div>";*/

如您所见，虽然这很有效，而且看起来更整洁且组合在一起，但该按钮不起作用。在尝试在地图或弹出窗口上呈现按钮时，这似乎是 Leaflet 的常见或已知问题。

---

最后，我找到了一个更好的解决方案。该按钮功能齐全，虽然它包含更多代码行，但您会发现它可能是解决弹出内容问题的最佳方法。同样，一般来说，这在实际应用中是更好的做法。

function onEachFeature(f,l){
    var isoa3 = f.properties.iso_a3;
    var popupContent = "";
    
    $.ajax({
            url: "libs/php/getRESTCountryInfo.php",
            type: 'POST',
            dataType: 'json',
            data: {
                iso: isoa3
            },
            success: function(result) {
               // console.log(JSON.stringify(result));
               // console.log("JSON stringified");
            
                let pop = result["population"];
                let popStr = pop.toLocaleString("en-US");
                
                //Popup Content

                var popupCreateContainingDivElement = document.createElement("div");
                    popupCreateContainingDivElement.className = "container";

                var popupCreateMainDivElement = document.createElement("div");
                    popupCreateMainDivElement.className = "container";

                var popupCreateCountryNameHeading = document.createElement("div");
                    popupCreateCountryNameHeading.innerHTML = f.properties.name;
                    popupCreateCountryNameHeading.className = "h3";

                var popupCreateCapitalTR = document.createElement("div");
                    popupCreateCapitalTR.className = "row";
                    var popupCreateCapitalTD = document.createElement("div");
                        popupCreateCapitalTD.className = "col";
                        popupCreateCapitalTD.innerText = "Capital:";
                    var popupCreateCapitalResultTD = document.createElement("div");
                        popupCreateCapitalResultTD.className = "col";
                        popupCreateCapitalResultTD.innerText = result["capital"];
                popupCreateCapitalTR.appendChild(popupCreateCapitalTD);
                popupCreateCapitalTR.appendChild(popupCreateCapitalResultTD);

                var popupCreatePopulationTR = document.createElement("div");
                    popupCreatePopulationTR.className = "row";
                    var popupCreatePopulationTD = document.createElement("div");
                        popupCreatePopulationTD.className = "col";
                        popupCreatePopulationTD.innerText = "Population:";
                    var popupCreatePopulationResultTD = document.createElement("div");
                        popupCreatePopulationResultTD.className = "col";
                        popupCreatePopulationResultTD.innerText = popStr;
                popupCreatePopulationTR.appendChild(popupCreatePopulationTD);
                popupCreatePopulationTR.appendChild(popupCreatePopulationResultTD);

                var popupCreateDemonymTR = document.createElement("div");
                    popupCreateDemonymTR.className = "row";
                    var popupCreateDemonymTD = document.createElement("div");
                        popupCreateDemonymTD.className = "col";
                        popupCreateDemonymTD.innerText = "Demonym:"
                    var popupCreateDemonymResultTD = document.createElement("div");
                        popupCreateDemonymResultTD.className = "col";
                        popupCreateDemonymResultTD.innerText = result["demonym"];
                popupCreateDemonymTR.appendChild(popupCreateDemonymTD);
                popupCreateDemonymTR.appendChild(popupCreateDemonymResultTD);

                var popupCreateLanguagesTR = document.createElement("div");
                    popupCreateLanguagesTR.className = "row";
                    var popupCreateLanguagesTD = document.createElement("div");
                        popupCreateLanguagesTD.className = "col";
                        popupCreateLanguagesTD.innerText = "Languages:";
                    var popupCreateLanguagesResultTD = document.createElement("div");
                        popupCreateLanguagesResultTD.className = "col";
                        popupCreateLanguagesResultTD.innerText = result["languages"];
                popupCreateLanguagesTR.appendChild(popupCreateLanguagesTD);
                popupCreateLanguagesTR.appendChild(popupCreateLanguagesResultTD);

                var popupCreateRegionTR = document.createElement("div");
                    popupCreateRegionTR.className = "row";
                    var popupCreateRegionTD = document.createElement("div");
                        popupCreateRegionTD.className = "col";
                        popupCreateRegionTD.innerText = "Region:";
                    var popupCreateRegionResultTD = document.createElement("div");
                        popupCreateRegionResultTD.className = "col";
                        popupCreateRegionResultTD.innerText = result["region"];
                popupCreateRegionTR.appendChild(popupCreateRegionTD);
                popupCreateRegionTR.appendChild(popupCreateRegionResultTD);

                var popupCreateAdditionalInfoButton = document.createElement("button");
                    popupCreateAdditionalInfoButton.innerHTML = "Protected Planet";
                    popupCreateAdditionalInfoButton.onclick = getProtectedPlanetAPI;
                    

                popupCreateMainDivElement.appendChild(popupCreateCountryNameHeading);
                popupCreateMainDivElement.appendChild(popupCreateCapitalTR);
                popupCreateMainDivElement.appendChild(popupCreatePopulationTR);
                popupCreateMainDivElement.appendChild(popupCreateDemonymTR);
                popupCreateMainDivElement.appendChild(popupCreateLanguagesTR);
                popupCreateMainDivElement.appendChild(popupCreateRegionTR);
                popupCreateMainDivElement.appendChild(popupCreateAdditionalInfoButton);

                popupCreateContainingDivElement.appendChild(popupCreateMainDivElement);



                var expandedSection = document.createElement("div");
                    expandedSection.className = "container";
                    expandedSection.id = "expandedSection";
                
                popupCreateContainingDivElement.appendChild(expandedSection);


                if (result.status.name == "ok") {

                    popupContent = popupCreateContainingDivElement;
                    var popupOptions =
                        {
                        'minWidth': '300',
                        'className' : 'custom'
                        }
                    l.bindPopup(popupContent, popupOptions);
                }
            
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
            }
    });