时间戳

首页 > 解决方案 > 如何在 Leaflet 图例（或其他控件）的工具提示中使用 HTML？

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

问题描述

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

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

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

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

这个问题有一个实际有效的答案。但是，如果我将最简单的 HTML 放入其中，它也会呈现为纯文本。例如<h``>Legend</h1>。

在带有解释 HTML 的 Leaflet 控件上显示工具提示的最简单方法是什么？没有弹出窗口？

图例不能永久显示，因为它会遮挡地图，并且地图必须填满窗口。

标签： leaflettooltip

解决方案

title 无法设置样式，因为每个浏览器都显示不同并且没有样式功能。它也应该只有一个衬里。

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

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 对其进行样式设置

推荐阅读