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

Question

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

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

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

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

谢谢你的帮助

Answer 1

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

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

演示:

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

//L.circle([48.85, 2.35], {radius: 1000}).bindTooltip("test").addTo(map);
L.rectangle([
  [48.84, 2.34],
  [48.86, 2.36]
]).bindTooltip("test").addTo(map);

html, body, #map {
  height: 100%;
  margin: 0;
}

<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>

---

要解决 OP 关于工具提示显示在多边形中心的评论，当多边形非常大且当前缩放比例很高时，工具提示可能会在 View 之外，您可以使用 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);

更新演示:

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

//L.circle([48.85, 2.35], {radius: 1000}).bindTooltip("test").addTo(map);
L.rectangle([
  [48.84, 2.34],
  [48.86, 2.36]
]).bindTooltip("test", {
  sticky: true
}).addTo(map);

html, body, #map {
  height: 100%;
  margin: 0;
}

<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>