在标记底部打开Leaflet Popup

I have placed several markers on my map and added popups to them. The following code is executed in a loop and works fine:

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

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

The markers are shown and popups open when you click them. However, the popup opens always on the top side of the marker. Is there a way to open in at the bottom (or on any side) of the marker? The popup-options in the Leaflet documentation do not seem to provide an option to do so.

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

3 个解决方案

#1

You have to provide the marker a customized Icon. You can use the same image, but you have to tweak the popupAnchor property to do that. See for reference http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html

您必须为标记提供自定义图标。您可以使用相同的图像,但必须调整popupAnchor属性才能执行此操作。请参阅http://leafletjs.com/reference.html#icon和http://leafletjs.com/examples/custom-icons.html以供参考

In your case you'll have to do (considering the default icon is 25 x 41 px, iconAnchor could be 12 x 40)

在你的情况下你将不得不这样做(考虑到默认图标是25 x 41 px,iconAnchor可能是12 x 40)

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

And the popup will open exactly at the same place of the position where the icon is anchored.

弹出窗口将完全打开图标所在位置的同一位置。

#2

There is no option for that ...

没有选择......

However, if your purpose is to display visible popups without moving the map, you can have a look at this Leaflet plugin: http://erictheise.github.io/rrose/

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

It will open the popup south from the marker if the marker is too north ...

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

#3

you can change the anchor, but built-in code determines where the popup is shown based on the visible window of the map.

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

what you could do is hook into the click of the marker and draw your own popup with custom code...

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

#1