在标记底部打开Leaflet弹出窗口

Question

在标记底部打开Leaflet弹出窗口

6

我在我的地图上放置了几个标记并添加了弹出窗口。以下代码在循环中执行，并且运行良好：

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

当您点击标记时，它们会显示并弹出气泡。但是，气泡始终在标记的顶部打开。是否有一种方法可以在标记的底部（或任何一侧）打开气泡？Leaflet文档中的popup-options似乎没有提供这样的选项。

- WeSt

4个回答

3

好的，我一直在努力自己解决这个问题，但我已经发现将位置设置为相对位置可以使弹出窗口出现在标记下方。

.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);
}

- badMan

1

在这种情况下，autoPan会中断，因为leaflet认为弹出窗口在上方。除非在弹出窗口打开后自己编写一个类似于autoPan的功能，否则真的没有办法实现这一点。 - Gustavo Gonçalves

2

对于此事没有选项......

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

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

- YaFred

1

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

你可以在标记的点击事件中挂钩并使用自定义代码绘制自己的弹出窗口...

- nrutas

我该怎么做？ - Rahul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sabas · Accepted Answer

您需要为标记提供一个定制的图标，您可以使用相同的图片，但是需要调整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})

弹出窗口将会在图标所固定的位置准确地打开。