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

Question

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

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

标题将添加到DOM但不可见.请参阅此处了解更多详细信息,但如果我遵循该解决方案,我将无法再使用传单功能.

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

谢谢你的帮助

Answer 1

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

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

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

要解决OP关于多边形中心显示的工具提示的注释,当多边形非常大且当前缩放很高时,该注释可能不在视图范围内,您可以使用以下sticky选项:

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/