Как я могу использовать лучшее форматирование в Leafet Popup HTML

Question

Я не кодер и учусь, как я go делаю листовки для меня.

Я сейчас работаю над всплывающими окнами и всплывающими подсказками. У меня есть тонна маркеров, и я хочу сделать некоторые базовые значения c HTML в тех всплывающих окнах, которые я выяснил, как это сделать, однако проблема в том, что вы не можете поместить возврат строк в код для всплывающих окон, поэтому это создает абсолютный беспорядок в коде. См. Пример ниже:

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, он не будет работать, см. Ниже

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
});

Расширяю ответ

Вы также можете использовать escape-нотацию, добавив в обратную сторону sh:

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>';