我尝试像这样重写 boxzoom 事件,
map.on('boxzoomend', function(e) {
console.log('end')
})
但是,boxzoom 仍然缩放,我不知道如何停止它并在控制台中打印文本。我希望把boxzoom重写成如下
- 停止缩放
- 在控制台中打印文本
你能提供重写事件的正确方法吗?谢谢。
最佳答案
缩放不是在 boxzoomend
事件中执行的,而是在 BoxZoom 处理程序中执行的。让我引用 Leaflet source code from src/map/handler/Map.BoxZoom.js
:
_onMouseUp: function (e) {
...
this._map
.fitBounds(bounds)
.fire('boxzoomend', {boxZoomBounds: bounds});
},
实现您想要的功能的更好方法是创建一个新的处理程序来扩展 BoxZoom 处理程序,修改您需要的方法。
我建议您阅读 Leaflet tutorials ,特别是 creating Leaflet plugins 上的那些在这样做之前。
想法是扩展 BoxZoom 处理程序:
L.Map.BoxPrinter = L.Map.BoxZoom.extend({
...修改 _onMouseUp 方法...
_onMouseUp: function (e) {
...所以它不是缩放,而是打印东西:
...
console.log(bounds);
this._map.fire('boxzoomend', {boxZoomBounds: bounds});
}
}
并且如教程所述, Hook 处理程序并为其提供一些 map 选项:
L.Map.mergeOptions({boxPrinter: true});
L.Map.addInitHook('addHandler', 'boxPrinter', L.Map.BoxPrinter);
当我们这样做时,默认禁用所有 map 实例的默认 BoxZoom 处理程序:
L.Map.mergeOptions({boxZoom: false});
整个事情看起来像this working example .
关于javascript - 重写传单事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41582673/