Leaflet标记弹出窗口文本中的换行符问题

Question

我有一个表单，可以将一些文本与Leaflet地图上的标记相关联：

<form action="map.php" method="POST">
 <section>
  <label>write some text here</label>
   <textarea id="text" rows="3" name="area"></textarea>
 </section>

 <input type="submit" value="show map" />
</form>

如上所示，文本区域的内容被传递到页面map.php，在该页面上显示地图。 在地图上，会显示位置标记，并且弹出窗口包含通过文本区域发布的文本（变量$text）：

<?php
$text = htmlspecialchars($_POST["text"]);
?>

<center>
 <div id="map" class="embed-container"></div>
</center>

<script>
  var map = L.map('map').setView([46.13, 11.11], 9);
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);
</script>
<script>
  var icon = L.icon({
        iconUrl: 'img/gps.png',
        iconSize: [25, 25],
        });
  var marker = L.marker(['<?=$latitude;?>', '<?=$longitude;?>'], {icon: icon}).addTo(map);
  marker.bindPopup('<?=$text;?>');
</script>

问题在于，如果我在文本区域中写东西时按下回车键，弹出标记什么都不会传递。我尝试使用\n等，但都无法正常工作。它们在弹出文本中显示为字符串，而不是换行符。

有什么想法吗？

- Alex

---

请尝试使用<br>。 - xmojmr

我也尝试过了。它被显示为字符串，就像原来的样子。 - Alex

有可能可以在JavaScript中做一些处理，来处理PHP变量$text。我不确定。 - Alex

Answer 1

问题在于，如果我在文本区域中输入内容时按下ENTER键，则不会将任何内容传递给弹出标记。

这是不准确的。弹出窗口内的HTML正在接收换行符。

问题在于，换行符被显示为折叠的空格。这是HTML中的默认设置。让我引用 white-space CSS属性的文档，默认继承所有HTML元素：

普通 - 空格序列被折叠。源代码中的换行符与其他空格一样处理。必要时打破行以填充行框。

HTML折叠空白字符，包括制表符和换行符（但不包括 ）。

Leaflet弹出窗口内的文本遵循相同规则。用HTML <br>换行符替换你的换行符，或者将每一行包装在块级元素中，比如<div>。

如果你正在使用php，最简单的方法是使用nl2br函数。虽然这不一定是最好的方法，因为在经验不足的开发人员手中，它很容易受到XSS攻击的影响。使用htmlspecialchars对于输出用引号括起来的JavaScript字符串是无效的。对于这些情况，我建议使用json_encode来提供引号和引号转义，例如var foo = <?= json_encode(nl2br(str)); ?>;。

- IvanSanchez

---

是的。函数nl2br正是我在找的东西。非常出色的回复。 - Alex

Answer 2

我遇到了一个问题，使用nl2br()函数无法正常工作，但是使用json_encode(nl2br(str))可以解决问题，不过它会在字符串的开头和结尾添加双引号("str")。最终我使用以下代码解决了这个问题：

原始回答(Original Answer)：

$string = str_replace("\r","",$string); 
$stringArray = explode("\n", $string);   
$string = implode("<br>", $stringArray);

我尝试在去除"\r"后使用nl2br()，但仍然无效，只是使它崩溃了... 最初的回答。

$string = str_replace("\r","",$string);
$string = nl2br($string); // DID NOT WORK!!!

- tpage