如何将html标题(工具提示)添加到leaflet.js多边形?

时间:2016-09-29 12:46:47

标签: javascript jquery html leaflet

我有一个leaflet地图,我想在我的多边形中添加一个html标题(工具提示)。如果我使用普通的JQuery:

$('<title>my tooltip</title>').appendTo()

标题会添加到DOM但不可见。有关详细信息,请参阅here,但如果我遵循该解决方案,则无法再使用传单功能。

我也尝试了leaflet.label插件,但标签随着鼠标指针移动。我只想要在悬停后不久出现在一个位置的标准浏览器标题工具提示

感谢您的帮助

1 个答案:

答案 0 :(得分:21)

Leaflet 1.0.0有一个新的内置L.tooltip类,它不赞成使用Leaflet.label插件。工具提示指向形状中心,不随鼠标移动。

L.polygon(coords).bindTooltip("my tooltip").addTo(map);

演示:https://jsfiddle.net/3v7hd2vx/91/

要解决OP关于多边形中心显示的工具提示的注释,当多边形非常大且当前缩放很高时,可以使用sticky选项:< / p>

L.polygon(coords).bindTooltip("my tooltip", {
  sticky: true // If true, the tooltip will follow the mouse instead of being fixed at the feature center.
}).addTo(map);

更新了演示:https://jsfiddle.net/3v7hd2vx/402/