問題描述
我嘗試重寫boxzoom事件，像這樣，
I try to rewrite the boxzoom event, like this,
map.on('boxzoomend', function(e) {
console.log('end')
})
但是，boxzoom 仍然縮放，我不知道如何停止它，只是在控制臺中打印文本.我希望將boxzoom重寫為如下
However, the boxzoom still zoomed and I have no idea how to stop it and just print text in console. I hope to rewrite boxzoom as the following
- 停止縮放
- 在控制臺中打印文本
你能提供重寫事件的正確方法嗎?謝謝.
Can you provide correct way to rewrite the event? Thank you.
推薦答案
縮放不是在 boxzoomend 事件中執行，而是在 BoxZoom 處理程序中執行.讓我引用 Leaflet 源代碼來自 src/map/handler/Map.BoxZoom.js:
The zooming is not performed in the boxzoomend event, but rather in the BoxZoom handler. Let me quote the Leaflet source code from src/map/handler/Map.BoxZoom.js:
_onMouseUp: function (e) {
...
this._map
.fitBounds(bounds)
.fire('boxzoomend', {boxZoomBounds: bounds});
},
實現所需功能的更好方法是創建一個擴展 BoxZoom 處理程序的新處理程序，修改您需要的方法.
A better way to achieve the functionality you want is to create a new handler that extends the BoxZoom handler, modifying the methods that you need.
我建議您閱讀 傳單教程，尤其是 在此之前創建 Leaflet 插件.
I recommend that you read the Leaflet tutorials, specially the ones on creating Leaflet plugins before doing this.
這個想法是擴展 BoxZoom 處理程序:
The idea is to extend the BoxZoom handler:
L.Map.BoxPrinter = L.Map.BoxZoom.extend({
...修改 _onMouseUp 方法...
...modifying the _onMouseUp method...
_onMouseUp: function (e) {
...所以它不是縮放，而是打印東西:
...so that instead of zooming, it just prints things:
...
console.log(bounds);
this._map.fire('boxzoomend', {boxZoomBounds: bounds});
}
}
正如教程所解釋的，掛鉤處理程序并為其提供一些地圖選項:
And as the tutorial explains, hook the handler and provide some map options for it:
L.Map.mergeOptions({boxPrinter: true});
L.Map.addInitHook('addHandler', 'boxPrinter', L.Map.BoxPrinter);
當我們這樣做時，默認禁用所有地圖實例的默認 BoxZoom 處理程序:
While we're at it, disable the default BoxZoom handler for all map instances by default:
L.Map.mergeOptions({boxZoom: false});
整個事情看起來像 這個工作示例.
這篇關于重寫傳單事件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！