如何在 Leaflet Popup 中使用更好的格式 HTML

Question

我不是编码员，我在制作传单时正在学习。

我现在正在处理我的弹出窗口和工具提示。我有很多标记，我想在那些我想出如何做的 PopUps 中做一些基本的 HTML，但是我遇到的问题是你不能在代码中添加行 returns弹出窗口，所以它在代码中造成了绝对的混乱。请参阅下面的示例：

var town_Zeonica = L.marker(map.unproject([1851,2431],map.getMaxZoom()), {icon: townIcon}).bindPopup('<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"><tbody><tr><td style="width: 194px;">Village</td><td style="width: 194px;">Resource</td></tr><tr><td style="width: 194px;">Neocorys</td><td style="width: 194px;">Midlands Palfrey</td></tr><tr><td style="width: 194px;">Alsasos</td><td style="width: 194px;">Grain</td></tr><tr><td style="width: 194px;">Zeocorys</td><td style="width: 194px;">Grain</td></tr></tbody></table>', {sticky: true, opacity: 1, closeButton: false});

如果我尝试像正常 HTML 那样放置行 returns，它将不起作用，请参见下文

var town_Zeonica = L.marker(map.unproject([1851,2431],map.getMaxZoom()), {icon: townIcon}).bindPopup('<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404">
<tbody>
<tr>
<td style="width: 194px;">Village</td>
<td style="width: 194px;">Resource</td>
</tr>
<tr>
<td style="width: 194px;">Neocorys</td>
<td style="width: 194px;">Midlands Palfrey</td>
</tr>
<tr>
<td style="width: 194px;">Alsasos</td>
<td style="width: 194px;">Grain</td>
</tr>
<tr>
<td style="width: 194px;">Zeocorys</td>
<td style="width: 194px;">Grain</td>
</tr>
</tbody>
</table>', {sticky: true, opacity: 1, closeButton: false});

有没有什么方法可以做到这一点，我可以得到很好的格式，或者我只需要正常创建它然后删除最终代码的所有换行符？

在此先感谢大家在我努力学习时给予的帮助。

Answer 1

我建议定义一个包含您的 html 代码的变量。并且会这样看：

var popupContent = '<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"><tbody><tr><td style="width: 194px;">Village</td><td style="width: 194px;">Resource</td></tr><tr><td style="width: 194px;">Neocorys</td><td style="width: 194px;">Midlands Palfrey</td></tr><tr><td style="width: 194px;">Alsasos</td><td style="width: 194px;">Grain</td></tr><tr><td style="width: 194px;">Zeocorys</td><td style="width: 194px;">Grain</td></tr></tbody></table>';

var town_Zeonica = L.marker(map.unproject([1851,2431], map.getMaxZoom()), {
    icon: townIcon
}).bindPopup(popupContent, {
    sticky: true,
    opacity: 1,
    closeButton: false
});

I extend the answer

您也可以使用转义符号，添加反斜杠：

var popupContent ='<font size="4" color="#a86733"><b>Zeonica<b></font><br><br><font color="Black">Shops:<br><font color="Grey">Clothier, Oilpress, Brewer<br></font><br>Villages (Resource):<br><font color="Grey">Neocorys (Midlands Palfrey)<br>Alsasos (Grain)<br>Zeocorys (Grain)<table style="height: 141px; border-color: fff;" width="404"> \
<tbody> \
<tr> \
<td style="width: 194px;">Village</td> \
<td style="width: 194px;">Resource</td> \
</tr> \
<tr> \
<td style="width: 194px;">Neocorys</td> \
<td style="width: 194px;">Midlands Palfrey</td> \
</tr> \
<tr> \
<td style="width: 194px;">Alsasos</td> \
<td style="width: 194px;">Grain</td> \
</tr> \
<tr> \
<td style="width: 194px;">Zeocorys</td> \
<td style="width: 194px;">Grain</td> \
</tr> \
</tbody> \
</table>';

如何在 Leaflet Popup 中使用更好的格式 HTML

How can I use better formatting in Leafet Popup HTML

html

popup

leaflet