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

问题描述

我有一个 leaflet 地图，我想为我的多边形添加一个 html 标题(工具提示).如果我使用纯 JQuery:

I have a leaflet map and I would like to add a html title (tooltip) to my polygon. If I use plain JQuery:

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

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

The title gets added to the DOM but is not visible. See here for more details but if I follow that solution, I can no longer use the leaflet features.

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

I also tried the leaflet.label plugin but the label moves around with the mouse pointer. I just want the standard browser title tooltip that appears in one position shortly after on hover)

感谢您的帮助

推荐答案

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

Leaflet 1.0.0 has a new built-in L.tooltip class that deprecates the Leaflet.label plugin. The tooltip points at the shape center and does not move with the mouse.

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

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

要解决 OP 关于在多边形中心显示工具提示的评论，当多边形很大并且当前缩放很高时可能会看不见，您可以使用 sticky 选项:

To address OP's comment about tooltip being displayed at the polygon center, which can be out of view when the polygon is very big and current zoom is high, you can use the sticky option:

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/

这篇关于如何将 html 标题(工具提示)添加到 leaflet.js 多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！