Question

我在地图上放了几个标记，并为它们添加了弹出窗口。以下代码在循环中执行并正常工作：

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

单击时会显示标记并打开弹出窗口。但是，弹出窗口始终位于标记的顶部。有没有办法在标记的底部（或任何一侧）打开？ Leaflet文档中的popup-options似乎没有提供这样做的选项。

Answer 1

没有选择...

但是，如果您的目的是在不移动地图的情况下显示可见的弹出窗口，您可以查看此Leaflet插件：http://erictheise.github.io/rrose/

如果标记太北，它会从标记向南打开弹出窗口...

Answer 2

您必须为标记提供自定义图标。您可以使用相同的图像，但必须调整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 3

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

你能做的就是勾选标记点击并用自定义代码绘制你自己的弹出窗口......

Answer 4

好的，所以我一直在努力弄清自己的位置，但是我想出了将位置设置为相对位置会使弹出式窗口显示在标记下方， .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);

}

在标记底部打开Leaflet Popup

4 个答案: