css - Mapbox/Leaflet Popups - 弹出窗口需要不同的最小高度

Question

我正在创建一个 map ，允许用户从左侧选择一个邮政编码，然后将其填入 map 本身。用户单击带阴影的邮政编码后，会出现一个弹出窗口，其中包含有关该邮政编码的信息(见下文):

与此同时，我正在对周围的竞争对手进行标记。当用户点击一个标记时，弹出窗口将出现竞争对手的名字，以及他们销售的特许汽车(见下文):

为了确保邮政编码信息适合弹出区域(我遇到了一些弹出窗口无法随包含的 div 展开的问题)，我创建了一个样式类以确保弹出窗口足够大:

div.leaflet-popup-content {
min-height: 400px;

坏消息是，现在这种风格被应用到我的竞争对手的别针上，看起来很糟糕。

有没有办法在声明的 bindpopup 区域内设置 css？

Answer 1

您可以将弹出内容放入具有自己的 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;
}

这是一个 fiddle 示例:

http://fiddle.jshell.net/nathansnider/nez8zrnm/