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

Question

我正在创建一个地图，允许用户从左侧 select 邮政编码，然后将其填入地图本身。用户单击带阴影的邮政编码后，将出现一个弹出窗口，其中包含有关该邮政编码的信息（见下文）：

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

为了确保邮政编码信息适合弹出区域（我遇到了一些问题，弹出窗口不会随包含的 div 展开），我创建了一个样式 class确保弹出窗口足够大：

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

}

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

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

Answer 1

不是让所有弹出窗口默认高 400 像素，您可以将弹出窗口内容放在一个 div 中，它有自己的 css class，然后设置该 class随你喜欢。例如，如果您有两个 GeoJSON 点图层（我们称它们为 points1 和 points2），并且您想要为 points1 制作 400 像素高的弹出窗口：

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 class 的 css 是：

.tallPop {
  min-height: 400px;
}

这是一个例子fiddle:

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

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

Mapbox/Leafet Popups - Need difference min-heights for popups

css

leaflet

mapbox