使传单工具提示可点击

2022-01-12 00:00:00 leaflet event-handling click javascript

我想在 Leaflet 地图(不带标记)上添加 工具提示 并使其可点击.以下代码添加了一个工具提示,但它不可点击:

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

我怎样才能让它工作?

推荐答案

要接收对 L.Tooltip 对象的点击,您需要:

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

  • 在关联的 DOM 对象上设置监听器:

  • set up a listener on the associated DOM object :

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

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

  • remove the pointer-events: none property set on that element:

    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 以将这些更改直接烘焙到定义中:

    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()));
    });
    

    还有一个演示

    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>

    相关文章