在標記底部打開傳單彈出窗口

Question

我在我的地圖上放置了幾個標記並向它們添加了彈出窗口。 以下代碼在循環中執行並且工作正常：

L.marker([
    item.Lat,
    item.Long
]).bindPopup(item.count + ' projects').addTo(map);

單擊標記時會顯示標記並打開彈出窗口。 但是，彈出窗口始終在標記的頂部打開。 有沒有辦法在標記的底部（或任何一側）打開？ Leaflet 文檔中的彈出選項似乎沒有提供這樣做的選項。

Answer 1

您必須為標記提供自定義圖標。 您可以使用相同的圖像，但您必須調整 popupAnchor 屬性才能做到這一點。 請參閱參考http://leafletjs.com/reference.html#icon和http://leafletjs.com/examples/custom-icons.html

在您的情況下，您必須這樣做（考慮到默認圖標是 25 x 41 像素，iconAnchor 可能是 12 x 40）

var yourIcon = L.icon({ popupAnchor: [0,0] });
var marker= L.marker([item.Lat, item.Long],{icon: yourIcon})

並且彈出窗口將在與圖標錨定的位置完全相同的位置打開。

Answer 2

好吧，所以我一直在努力自己弄清楚這一點，但我已經發現將位置設置為相對將使彈出窗口出現在標記下方，

.leaflet-popup {
    position: relative;
    text-align: center;
}

您可能還想旋轉彈出窗口的尖端。

.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: relative;
left: 50%;
top: -117px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
transform: rotate(180deg);
}

Answer 3

沒有選擇...

但是，如果您的目的是在不移動地圖的情況下顯示可見的彈出窗口，您可以查看這個 Leaflet 插件： http : //erictheise.github.io/rrose/

如果標記太北，它將從標記向南打開彈出窗口......

Answer 4

您可以更改錨點，但內置代碼會根據地圖的可見窗口確定彈出窗口的顯示位置。

您可以做的是點擊標記並使用自定義代碼繪制自己的彈出窗口...