简体   繁体   English

如何为L.Tooltip显示设置延迟?

[英]How to set a delay for L.Tooltip display?

I am wondering how to set a delay for tooltip visualization on mouse hover. 我想知道如何设置鼠标悬停工具提示可视化的延迟。 I haven't found such a feature in options description in docs. 我没有在文档中的选项描述中找到这样的功能。

My map is crowded with many markers, so when mouse is moving around, all the time some tooltips appear. 我的地图上挤满了许多标记,所以当鼠标移动时,一直会出现一些工具提示。 My idea is to set some delay, so that for example after 1 second of hovering, tooltip for this particular marker to be displayed. 我的想法是设置一些延迟,以便例如在悬停1秒之后,显示该特定标记的工具提示。

Thank you! 谢谢!

I also needed to have the delay function, so I grabed it from the old Tooltip plugin and made a quick workaround, it probably can be done way better, but I have no time to improve it. 我还需要有延迟功能,所以我从旧的Tooltip插件中抓取它并快速解决方法,它可能做得更好,但我没时间改进它。

I extended the bindtooltip, open and close methods and added the 'showDelay' and 'hideDelay' properties to the L.Layer class. 我扩展了bindtooltip,open和close方法,并将'showDelay'和'hideDelay'属性添加到L.Layer类中。 I added a click event to close the tooltip at the "initTooltipInteractions' too, because it made sense in my specific situation, but you can take it off. 我添加了一个click事件来关闭“initTooltipInteractions”中的工具提示,因为它在我的特定情况下是有意义的,但你可以把它取下来。

Just add this to a javascript file and load it after leaflet: 只需将其添加到javascript文件并在传单后加载:

 L.Layer.include({

     showDelay: 1200,
     hideDelay: 100,

     bindTooltipDelayed: function (content, options) {

         if (content instanceof L.Tooltip) {
             L.setOptions(content, options);
             this._tooltip = content;
             content._source = this;
         } else {
             if (!this._tooltip || options) {
                 this._tooltip = new L.Tooltip(options, this);
             }
             this._tooltip.setContent(content);

         }

         this._initTooltipInteractionsDelayed();

         if (this._tooltip.options.permanent && this._map && this._map.hasLayer(this)) {
             this.openTooltipWithDelay();
         }

         return this;
     },

     _openTooltipDelayed: function (e) {
         var layer = e.layer || e.target;

         if (!this._tooltip || !this._map) {
             return;
         }
         this.openTooltipWithDelay(layer, this._tooltip.options.sticky ? e.latlng : undefined);
     },

     openTooltipDelayed: function (layer, latlng) {
         if (!(layer instanceof L.Layer)) {
             latlng = layer;
             layer = this;
         }
         if (layer instanceof L.FeatureGroup) {
             for (var id in this._layers) {
                 layer = this._layers[id];
                 break;
             }
         }
         if (!latlng) {
             latlng = layer.getCenter ? layer.getCenter() : layer.getLatLng();
         }
         if (this._tooltip && this._map) {
             this._tooltip._source = layer;
             this._tooltip.update();
             this._map.openTooltip(this._tooltip, latlng);
             if (this._tooltip.options.interactive && this._tooltip._container) {
                 addClass(this._tooltip._container, 'leaflet-clickable');
                 this.addInteractiveTarget(this._tooltip._container);
             }
         }

         layer.fireEvent('mousemove', lastMouseEvent);

         return this;
     },
     openTooltipWithDelay: function (t, i) {
         this._delay(this.openTooltipDelayed, this, this.showDelay, t, i);
     },
     closeTooltipDelayed: function () {
         if (this._tooltip) {
             this._tooltip._close();
             if (this._tooltip.options.interactive && this._tooltip._container) {
                 removeClass(this._tooltip._container, 'leaflet-clickable');
                 this.removeInteractiveTarget(this._tooltip._container);
             }
         }
         return this;
     },
     closeTooltipWithDelay: function () {
         clearTimeout(this._timeout);
         this._delay(this.closeTooltipDelayed, this, this.hideDelay);
     },
     _delay: function (func, scope, delay, t, i) {
         var me = this;
         if (this._timeout) {
             clearTimeout(this._timeout)
         }
         this._timeout = setTimeout(function () {
             func.call(scope, t, i);
             delete me._timeout
         }, delay)
     },
     _initTooltipInteractionsDelayed: function (remove$$1) {
         if (!remove$$1 && this._tooltipHandlersAdded) { return; }
         var onOff = remove$$1 ? 'off' : 'on',
            events = {
                remove: this.closeTooltipWithDelay,
                move: this._moveTooltip
            };
         if (!this._tooltip.options.permanent) {
             events.mouseover = this._openTooltipDelayed;
             events.mouseout = this.closeTooltipWithDelay;
             events.click = this.closeTooltipWithDelay;
             if (this._tooltip.options.sticky) {
                 events.mousemove = this._moveTooltip;
             }
             if (L.touch) {
                 events.click = this._openTooltipDelayed;
             }
         } else {
             events.add = this._openTooltipDelayed;
         }
         this[onOff](events);
         this._tooltipHandlersAdded = !remove$$1;
     }
 });

And then to use it: 然后使用它:

layer.showDelay = 800; //use 0 for no delay behavior
layer.hideDelay = 2000; //use 0 for normal behavior
layer.bindTooltipDelayed("text", tooltipOptions);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM