Making Leaflet tooltip clickable

好久不见. 提交于 2021-02-04 22:15:13

问题


I want to add tooltips on a Leaflet map (without markers) and make them clickable. The following code adds a tooltip but it's not clickable:

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!");
});

How can I make it work?


回答1:


To receive clicks on a L.Tooltip object, you'll need to :

  • set up a listener on the associated DOM object :

    var el = tooltip.getElement();
    el.addEventListener('click', function() {
       console.log("click");
    });
    
  • remove the pointer-events: none property set on that element:

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

A demo so far

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>

If you want to create a component or listen directly to a tooltip object, you can extend L.Tooltip to bake those alterations directly into the definition:

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(e) {
    console.log("clicked", JSON.stringify(e.target.getLatLng()));
});

And a demo

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(e) {
    console.log("clicked", JSON.stringify(e.target.getLatLng()));
});
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>



回答2:


Easy solution: set the interactive property to true:

tooltip interactive

in react-leaflet

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



回答3:


new L.Tooltip().setLatLng([]).addTo(map).bindTooltip(your html, {permanent: true,interactive: true,direction: 'center',className: 'yourclassname'});



来源:https://stackoverflow.com/questions/48443493/making-leaflet-tooltip-clickable

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!