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>

正如您在上面所看到的，textarea的内容被传递到页面map.php，其中显示了一个地图。在地图上，将显示地点标记，弹出窗口包含通过textarea（变量$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>

问题是如果我在textarea中写一些内容时按 ENTER ，则不会将任何内容传递给弹出标记。我尝试使用 \ n 等，但没有任何效果。它们在弹出文本中显示为字符串，而不是换行符。

有什么想法吗？

Answer 1

问题是如果我在textarea中写一些内容时按 ENTER ，则不会将任何内容传递给弹出标记。

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

问题是换行符正在显示为折叠的空格。这是HTML中的默认值。让我引用所有HTML元素默认继承的documentation for the white-space CSS property：

正常


空白的序列已折叠。源中的换行符作为其他空格处理。根据需要打破行以填充行框。

HTML会折叠空白字符，包括标签和换行符（但不包括 ）。

Leaflet弹出窗口内的文本只是遵循相同的规则。 将您的换行符替换为HTML <br> line breaks ，或以<div>的形式将每一行换行为var foo = <?= json_encode(nl2br(str)); ?>;。

block-level element

如果您使用，最简单的方法是使用php。这不一定是最好的方式，因为非常倾向于允许XSS攻击在没有经验的开发人员手中。如果您输出用引号括起来的JavaScript字符串，nl2br function将无济于事。对于这些情况，我建议使用Using htmlspecialchars来提供引号和引号，即$("#parentdiv :last-child");

Answer 2

在nl2br（）不能正常工作并且json_encode（nl2br（str））正常工作时，但是它在字符串的开头和结尾添加了双引号（“ str”）。我终于能够将其与以下代码一起使用：

$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!!!

Leaflet标记弹出文本中的换行符

2 个答案: