如何在 Leaflet 图例（或其他控件）的工具提示中使用 HTML？

Question

到目前为止，我已经浪费了一天的时间。我有一个图例会掩盖我的 (AngualrJs) 传单地图的很大一部分，所以我不希望它永久可见。

我想这意味着一个工具提示，虽然一个可点击的按钮也可以接受（缺点：需要点击打开和关闭）。

有很多很多尝试来回答这个问题，甚至 Leaflet legend plugin，这将是理想的，但对我来说不起作用，可能是因为 angualrJs 或 Leaflet 的版本使用过。

我发现的大多数解决方案似乎都使用 HML 和 CSS 在地图上放置一个按钮，但我更愿意使用地图的一部分。

有一个实际有效的答案。 BUT，即使我在其中放入最简单的 HTML，它也会呈现为纯文本。例如 <h``>Legend</h1>.

在带有解释 HTML 的 Leaflet 控件上显示工具提示的最简单方法是什么？失败弹出 window?

图例无法永久显示，因为它会遮挡地图，地图必须填充 window。

Answer 1

title can't be styled 因为每个浏览器显示不一样，没有样式功能。它也应该只有一个班轮。

您可以创建自己的工具提示，它仅在鼠标悬停在控件上时可见。

L.CustomControl = L.Control.extend({
      options: {
        position: 'topright'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
      },

      onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
        container.title = "Plain Text Title";
        var button = L.DomUtil.create('a', '', container);
        button.innerHTML = '<img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/location-512.png" width="100%"/>';
        L.DomEvent.disableClickPropagation(button);
        L.DomEvent.on(button, 'click', this._click,this);
        L.DomEvent.on(button, 'mouseover', this._mouseover,this);
        L.DomEvent.on(button, 'mouseout', this._mouseout,this);



        var hiddenContainer = L.DomUtil.create('div', 'leaflet-bar leaflet-control',container);
        hiddenContainer.style.position = "absolute";
        hiddenContainer.style.right = "32px";
        hiddenContainer.style.width = "100px";
        hiddenContainer.style.height = "100%";
        hiddenContainer.style.top = "-2px";
        hiddenContainer.style.margin = "0";
        hiddenContainer.style.background = "#fff";
        hiddenContainer.style.display = "none";

        L.DomEvent.on(hiddenContainer, 'mouseover', this._mouseover,this);
        L.DomEvent.on(hiddenContainer, 'mouseout', this._mouseout,this);
        L.DomEvent.disableClickPropagation(hiddenContainer);

        this.hiddenContainer = hiddenContainer;

        return container;
      },
      _click : function () {
      },
      _mouseover : function () {
        this.hiddenContainer.style.display ="block";
      },
      _mouseout : function () {
        this.hiddenContainer.style.display ="none";
      },
      setContent: function(text){
        this.hiddenContainer.innerHTML = text;
      }
    });
    var control = new L.CustomControl().addTo(map)
    control.setContent('<span style="color: red">TEST</span>')

https://jsfiddle.net/falkedesign/r1ndpL9y/

您需要自己用 CSS 设置样式

如何在 Leaflet 图例（或其他控件）的工具提示中使用 HTML？

How to use HTML in a tooltip on a Leaflet legend (or other control)?

tooltip

leaflet