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

我有一个leaflet map ，我想在多边形中添加一个html标题(工具提示)。如果我使用纯JQuery:

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

标题已添加到DOM，但不可见。有关更多详细信息，请参见here。但是，如果遵循该解决方案，我将无法再使用传单功能。

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

谢谢你的帮助

最佳答案

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/