我有一个表单来将一些文本与LeafletMap上的标记相关联:
<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,在那里显示了一个Map。在Map上,显示了地点标记,弹出窗口包含通过文本区域发布的文本(变量$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: '© <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>
型
问题是,如果我在文本区域中写入内容时按下ENTER,则不会向弹出标记传递任何内容。我尝试使用**\n**等,但没有任何效果。它们在弹出文本中显示为字符串,而不是换行符。
有什么想法吗?
3条答案
按热度按时间o0lyfsai1#
问题是,如果我在文本区域中写入内容时按下ENTER,则不会向弹出标记传递任何内容。
这是不准确的。弹出窗口中的HTML正在接收一个换行符。
问题是换行符被显示为折叠的空格。这是HTML中的默认设置。让我引用documentation for the
white-space
CSS property,默认情况下所有HTML元素都继承:正常
HTML折叠空格字符,包括制表符和换行符(但不包括
)。的数据
传单弹出窗口中的文本也遵循相同的规则。将换行符替换为HTML
<br>
line breaks,或者将每行用block-level element Package ,就像<div>
一样。的
如果你使用php,最简单的方法是使用
nl2br
function。这不一定是最好的方法,因为它非常容易让没有经验的开发人员进行XSS攻击。如果你输出的是引号中的JavaScript字符串,Usinghtmlspecialchars
将不会有帮助。对于这些情况,我建议使用json_encode
提供引号和引号缩放,即var foo = <?= json_encode(nl2br(str)); ?>;
nsc4cvqm2#
有一个问题,nl2br()不工作,json_encode(nl2br(str))工作,但它添加了双引号(“str”)到字符串的开头和结尾。我终于能够让它工作,下面的代码:
字符串
我尝试nl2br()后removinb“\r”,它仍然不工作,只是打破了它.
型
acruukt93#
尝试在字符串之间使用
<br>
。例如:
字符串