我正在创建一个允许用户从左侧选择邮政编码的地图，然后将其填入地图本身。一旦用户单击阴影邮政编码，就会出现一个弹出窗口，其中包含有关该邮政编码的信息（见下文）：
同时，我正在对周围的竞争对手进行标记。当用户点击一个标记时，弹出窗口将显示竞争对手的名称，以及他们销售的特许汽车（见下文）：
为了确保邮政编码信息适合弹出区域（我遇到了一些问题，即弹出窗口不会随着包含的 div 展开），我创建了一个样式类来确保弹出窗口足够大：
div.leaflet-popup-content {
min-height: 400px;
}
坏消息是，现在这种风格被应用到我的竞争对手的别针上，看起来很糟糕。
有没有办法在声明的 bindpopup 区域内设置 css？
【问题讨论】：
您可以将弹出内容放在具有自己的 css 类的div 中，而不是默认使所有弹出窗口高 400 像素，然后根据需要设置该类的属性。例如，如果您有两个 GeoJSON 点图层（我们称它们为 points1 和 points2），并且您想要为 points1 制作 400px 高的弹出窗口：
var tallPoints = L.geoJson(points1, {onEachFeature: onEachTall}).addTo(map);
var shortPoints = L.geoJson(points2, {onEachFeature: onEachShort}).addTo(map);
function onEachTall(feature, layer) {
layer.bindPopup('<div class="tallPop">Tall Popup is Tall</div>');
}
function onEachShort(feature, layer) {
layer.bindPopup('<div class="shortPop">Short Popup is not so Tall</div>');
}
tallPop 类的 css 在哪里：
.tallPop {
min-height: 400px;
}
这是一个小提琴示例：
【讨论】：