javascript 如何在单张Map弹出窗口中设置迭代传递的文本样式

fiei3ece 于 2023-01-04 发布在 Java

关注(0)|答案(2)|浏览(104)

我有一个点列表，我想在其中迭代并添加到传单Map。我可以将点添加到Map，但当我尝试使用h1标签设置文本样式时，样式不是应用于迭代中的文本。2从传单教程中我可以看到弹出窗口中的文本可以用标题标签来设置样式。3我怎样才能设置这个通过迭代传递到弹出窗口中的文本的样式呢？下面是我的示例代码。

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

JavaScript

来源：https://stackoverflow.com/questions/74983276/how-to-style-text-passed-from-iteration-in-leaflet-map-pop-up-window

2条答案

按热度按时间

3duebb1j1#

您可以在bindPopup方法中使用HTML标记。例如：

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

这将在弹出窗口中的位置名称周围添加一个h1元素。
对于使用CSS的h1元素样式：

h1 {
  color: red;
}

赞(0）回复(0）举报 2023-01-04

qni6mghb2#

根据@divyavinod6提供的答案，我将*for*改为forEach以执行迭代。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>

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 如何在单张Map弹出窗口中设置迭代传递的文本样式

2条答案

相关问题

热门标签

最新问答