在标记底部打开传单弹出窗口

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

您可以更改锚点，但内置代码会根据地图的可见窗口确定弹出窗口的显示位置。

您可以做的是点击标记并使用自定义代码绘制自己的弹出窗口...