問(wèn)題描述
我有一個(gè) leaflet 地圖，我想為我的多邊形添加一個(gè) html 標(biāo)題(工具提示).如果我使用純 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()
標(biāo)題被添加到 DOM 但不可見.請(qǐng)參閱此處了解更多詳細(xì)信息，但如果我遵循該解決方案，我可以不再使用傳單功能.
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 插件，但標(biāo)簽會(huì)隨著鼠標(biāo)指針移動(dòng).我只想要在懸停后不久出現(xiàn)在一個(gè)位置的標(biāo)準(zhǔn)瀏覽器標(biāo)題工具提示)
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 有一個(gè)新的內(nèi)置 L.tooltip 類，棄用 Leaflet.label 插件.工具提示指向形狀中心，不隨鼠標(biāo)移動(dòng).
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 關(guān)于在多邊形中心顯示工具提示的評(píng)論，當(dāng)多邊形很大并且當(dāng)前縮放很高時(shí)可能會(huì)看不見，您可以使用 sticky 選項(xiàng):
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/
這篇關(guān)于如何將 html 標(biāo)題(工具提示)添加到 leaflet.js 多邊形?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！