web-dev-qa-db-ja.com

htmlタイトル（ツールチップ）をleaflet.jsポリゴンに追加する方法は？

リーフレット マップがあり、ポリゴンにhtmlタイトル（ツールチップ）を追加したいと思います。プレーンなJQueryを使用する場合：

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

タイトルはDOMに追加されますが、表示されません。詳細については here を参照してください。ただし、その解決策に従うと、リーフレット機能を使用できなくなります。

leaflet.label プラグインも試しましたが、ラベルはマウスポインターとともに動きます。ホバー直後に1つの位置に表示される標準のブラウザタイトルツールチップが必要です）

ご協力いただきありがとうございます

javascriptjqueryhtmlleaflet
11
JW-Munich

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/

21
ghybs