如何为Leaflet地图循环传入的弹窗文本设置样式

你的核心问题是变量未被正确解析：你在bindPopup里用双引号包裹了<h1> loc[0] </h1>，这里的loc[0]会被当作普通字符串显示，而非你预期的点位名称，导致看起来样式没生效（实际<h1>标签本身是生效的，只是内容不符合预期）。

修正方法 #

使用JS的模板字符串（反引号``）编写弹窗的HTML内容，即可正确插入变量：

for (let loc of locations){
    marker = new L.marker([loc[1], loc[2]])
    .bindPopup(`<h1>${loc[0]}</h1>`) // 用反引号+${}插入变量
    .addTo(map);
}

也可以用传统字符串拼接方式实现：

.bindPopup("<h1>" + loc[0] + "</h1>")

自定义弹窗样式（可选） #

如果需要更个性化的样式，可给标题添加自定义类，再通过CSS覆盖默认样式：

1. 修改弹窗HTML：

.bindPopup(`<h1 class="popup-title">${loc[0]}</h1>`)

2. 在<style>标签中添加样式规则：

.popup-title {
    color: #2c3e50;
    font-size: 18px;
    margin: 0 0 8px 0;
}

内容的提问来源于stack exchange，提问作者mapperx