如何在传单地图弹出窗口中迭代传递文本样式

我有一个想要迭代并添加到传单地图的点列表。我能够添加点到地图，但当我试图使用h1标签的文本样式，则样式不应用于迭代中的文本。从传单教程我可以看到，在弹出文本可以样式与标题标签。我怎么能样式这个文本，我通过迭代传递到弹出窗口。下面是我的示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>

</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
for (let loc of locations){
//  console.log(loc[0])
marker = new L.marker([loc[1], loc[2]])
.bindPopup("<h1> loc[0] </h1> ")
.addTo(map);
}
</script>
</html>

可以在bindPopup方法中使用HTML标签。例如:

locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});

这将在弹出窗口的位置名称周围添加一个h1元素。

h1 {
color: red;
}

根据@divyavinod6提供的答案，我将改为toforEach来执行迭代。forEach允许在迭代元素上运行函数。下面是完整的代码，如果它对其他人有用的话

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="customstyle.css"> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>

</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});
</script>
</html>

相关内容

最新更新

热门标签：