Question

我想在Leaflet地图上添加工具提示（没有标记），并使它们可以点击。以下代码添加了工具提示，但它无法点击：

var tooltip = L.tooltip({
        direction: 'center',
        permanent: true,
        interactive: true,
        noWrap: true,
        opacity: 0.9
    });
tooltip.setContent( "Example" );
tooltip.setLatLng(new L.LatLng(someLat, someLon));
tooltip.addTo(myLayer);
tooltip.on('click', function(event) {
    console.log("Click!");
});

我怎样才能让它发挥作用？

Answer 1

要获得L.Tooltip对象的点击次数，您需要：

在关联的DOM对象上设置侦听器：

var el = tooltip.getElement();
el.addEventListener('click', function() {
    console.log("click");
});

删除该元素上设置的pointer-events: none属性：

var el = tooltip.getElement();
el.style.pointerEvents = 'auto';

到目前为止的演示

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var tooltip = L.tooltip({
    direction: 'center',
    permanent: true,
    interactive: true,
    noWrap: true,
    opacity: 0.9
});
tooltip.setContent( "Example" );
tooltip.setLatLng(new L.LatLng(48.8583736, 2.2922926));
tooltip.addTo(map);

var el = tooltip.getElement();
el.addEventListener('click', function() {
    console.log("click");
});
el.style.pointerEvents = 'auto';

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
   
<div id='map'></div>

如果要创建组件或直接监听工具提示对象，可以扩展L.Tooltip以将这些更改直接烘焙到定义中：

L.ClickableTooltip = L.Tooltip.extend({
    onAdd: function (map) {
        L.Tooltip.prototype.onAdd.call(this, map);

        var el = this.getElement(),
            self = this;

        el.addEventListener('click', function() {
            self.fire("click");
        });
        el.style.pointerEvents = 'auto';
    }
});

var tooltip = new L.ClickableTooltip({
    direction: 'center',
    permanent: true,
    noWrap: true,
    opacity: 0.9
});
tooltip.setContent( "Example" );
tooltip.setLatLng(new L.LatLng(48.8583736, 2.2922926));
tooltip.addTo(map);

tooltip.on('click', function() {
    console.log("clicked too");
});

和演示

L.ClickableTooltip = L.Tooltip.extend({

    onAdd: function (map) {
        L.Tooltip.prototype.onAdd.call(this, map);

        var el = this.getElement(),
            self = this;

        el.addEventListener('click', function() {
            self.fire("click");
        });
        el.style.pointerEvents = 'auto';
    }
});


var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var tooltip = new L.ClickableTooltip({
    direction: 'center',
    permanent: true,
    noWrap: true,
    opacity: 0.9
});
tooltip.setContent( "Example" );
tooltip.setLatLng(new L.LatLng(48.8583736, 2.2922926));
tooltip.addTo(map);

tooltip.on('click', function() {
    console.log("clicked too");
});

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
   
<div id='map'></div>

Answer 2

简便的解决方案：将interactive属性设置为true：

tooltip interactive

在反应传单中

<Tooltip interactive={true}><Tooltip />

Answer 3

new L.Tooltip（）。setLatLng（[]）。addTo（map）.bindTooltip（your html，{permanent：true，interactive：true，direction：'center'，className：'yourclassname'}）; < / p>

制作Leaflet工具提示可点击

3 个答案: