Leaflet标记弹窗多字段展示问题：从SQL表读取多字段

很简单，你只需要修改marker.bindPopup()里的内容，把多个字段用HTML结构拼接起来，这样弹窗里的信息既全面又排版清晰。

核心修改点就是把原来只传单个health_con字段的代码，换成包含所有需要展示字段的模板字符串（用反引号包裹，支持多行和变量插入），具体修改后的代码如下：

function plotCases() {
  // Loop through caseData to create marker at each location
  for (var i = 0; i < caseData.length; i++) {
    var markerLocation = new L.LatLng(caseData[i].lat, caseData[i].lon);
    var marker = new L.Marker(markerLocation);
    mymap.addLayer(marker);
    
    // 修改为多字段拼接的HTML内容，实现弹窗多信息展示
    marker.bindPopup(`
      <div style="padding: 8px; max-width: 220px;">
        <h4 style="margin: 0 0 10px 0;">患者信息</h4>
        <p style="margin: 5px 0;"><strong>姓名:</strong> ${caseData[i].first_name} ${caseData[i].family_name}</p>
        <p style="margin: 5px 0;"><strong>健康状况:</strong> ${caseData[i].health_con}</p>
        <p style="margin: 5px 0;"><strong>NIN:</strong> ${caseData[i].nin}</p>
        <p style="margin: 5px 0;"><strong>备注:</strong> ${caseData[i].notes || '无备注信息'}</p>
      </div>
    `);
  }
}

小细节说明： #

• 用模板字符串（反引号`）可以轻松拼接多行内容和变量，比传统的+拼接字符串更简洁易读
• 加入了简单的内联CSS样式，让弹窗内容排版更舒服，你可以根据自己的需求调整样式细节
• 给notes字段加了|| '无备注信息'的判断，如果该字段为空，就显示默认提示，避免弹窗出现空白内容

这样修改后，点击标记就能看到包含姓名、健康状况、NIN和备注的完整弹窗信息啦～

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