在這篇文章中，我們將探討如何在 Leaflet 中處理事件與互動。Leaflet 提供了豐富的事件處理機制，讓開發者可以在地圖上輕鬆實現互動操作，例如點擊地圖、拖動標記等。

監聽

在leaflet中，若要監聽地圖或地圖元素，可以使用內建的方法，map.on

map.on('click', function(e) {
    L.marker([e.latlng.lat, e.latlng.lng]).addTo(map)
        .bindPopup("你點擊的座標是：" + e.latlng.toString())
        .openPopup();
});

常見事件類型

地圖事件

地圖對象是最核心的 Leaflet 組件，許多互動都會觸發地圖事件。以下是常見的地圖事件：

click: 當用戶點擊地圖時觸發。
dblclick: 當用戶雙擊地圖時觸發。
mousedown: 當用戶在地圖上按下滑鼠按鍵時觸發。
mouseup: 當用戶在地圖上鬆開滑鼠按鍵時觸發。
mousemove: 當用戶在地圖上移動滑鼠時觸發。
zoomstart: 當地圖開始縮放時觸發。
zoomend: 當地圖縮放完成時觸發。
move: 當地圖被移動時觸發。
movestart: 當地圖開始移動時觸發。
moveend: 當地圖移動完成時觸發。
dragstart: 當地圖開始被拖動時觸發。
drag: 當地圖被拖動時持續觸發。
dragend: 當地圖拖動結束時觸發。
resize: 當地圖大小改變時觸發（如視窗大小改變時）。
load: 當地圖及其所有層被完全加載後觸發。
範例:點擊事件

map.on('click', function(e) {
    alert("你點擊的位置是：" + e.latlng);
});

marker事件

標記是地圖上經常用來指示特定位置的元素，它們有多個與用戶互動相關的事件：

click: 點擊標記時觸發。
dblclick: 雙擊標記時觸發。
mouseover: 當滑鼠懸停在標記上時觸發。
mouseout: 當滑鼠移出標記時觸發。
dragstart: 當標記開始被拖動時觸發。
drag: 當標記被拖動時持續觸發。
dragend: 當標記拖動結束時觸發。
contextmenu: 當用戶在標記上右擊時觸發（彈出右鍵選單）。
範例:marker拖動事件

marker.on('dragend', function(e) {
    var newLatLng = e.target.getLatLng();
    alert("標記的新位置：" + newLatLng);
});

圖形事件

在 Leaflet 中繪製的各種幾何圖形（如多邊形、折線、圓形等）也能觸發各種事件：

click: 當用戶點擊圖形時觸發。
dblclick: 當用戶雙擊圖形時觸發。
mouseover: 當滑鼠懸停在圖形上時觸發。
mouseout: 當滑鼠移出圖形時觸發。
mousedown: 當滑鼠按下且在圖形內時觸發。
mouseup: 當滑鼠在圖形內鬆開時觸發。
contextmenu: 當用戶在圖形上右擊時觸發（彈出右鍵選單）。

polygon.on('mouseover', function() {
    polygon.setStyle({ color: 'red' });
});
polygon.on('mouseout', function() {
    polygon.setStyle({ color: 'blue' });
});

圖層事件

地圖上的圖層（如 TileLayer、ImageOverlay 等）也可以觸發特定事件：

load: 當圖層加載完成後觸發。
loading: 當圖層開始加載時觸發。
tileloadstart: 當某個瓦片開始加載時觸發。
tileload: 當某個瓦片加載完成後觸發。
tileunload: 當某個瓦片從快取中卸載時觸發。
tileerror: 當某個瓦片加載失敗時觸發。

tileLayer.on('tileloadstart', function() {
    console.log("開始加載圖磚...");
});
tileLayer.on('tileload', function() {
    console.log("圖磚加載完成");
});

popup事件

Leaflet 的 Popup 也能觸發一些事件，常見的有：

open: 當彈出視窗打開時觸發。
close: 當彈出視窗關閉時觸發。

Tooltip事件

Leaflet 的工具提示（Tooltip）同樣有一些事件可以監聽：

add: 當工具提示被添加到地圖上時觸發。
remove: 當工具提示從地圖上移除時觸發。
open: 當工具提示打開時觸發。
close: 當工具提示關閉時觸發。

通用事件

這些事件是可以應用於多個不同類型對象的通用事件：

add: 當某個元素（如圖形、標記等）被添加到地圖時觸發。
remove: 當某個元素從地圖上移除時觸發。
popupopen: 當彈出視窗在元素上打開時觸發。
popupclose: 當彈出視窗在元素上關閉時觸發。
tooltipopen: 當工具提示在元素上打開時觸發。
tooltipclose: 當工具提示在元素上關閉時觸發。

總結

Leaflet 的事件系統提供了豐富的互動功能，允許你在地圖的各種組件上進行事件監聽和處理。透過了解這些事件，你可以創建出更具互動性和動態效果的地圖應用。在實際應用中，根據具體需求選擇適合的事件監聽器，讓你的地圖應用更加靈活多變。
今天先這樣，明天見。