快速入門指南 - Leaflet - 用於互動式地圖的 JavaScript 函式庫

Leaflet 快速入門指南

這個逐步指南將快速引導您開始使用 Leaflet 的基礎知識，包括設定 Leaflet 地圖、使用標記、折線和彈出視窗，以及處理事件。

準備您的頁面

在為地圖編寫任何程式碼之前，您需要在頁面上執行以下準備步驟

在您文件的 head 區段中包含 Leaflet CSS 檔案

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

在 Leaflet 的 CSS 之後包含 Leaflet JavaScript 檔案

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

放置一個具有特定 id 的 div 元素，以表示您希望地圖顯示的位置
```
 <div id="map"></div>
```
確保地圖容器具有定義的高度，例如在 CSS 中設定
```
#map { height: 180px; }
```

現在您已準備好初始化地圖並對其進行一些操作。

設定地圖

查看這個獨立的範例。

讓我們建立一個以倫敦市中心為中心並使用美觀的 OpenStreetMap 圖磚的地圖。從這裡開始，我們將使用 JS 進行操作。首先，我們將初始化地圖並將其視圖設定為我們選擇的地理座標和縮放層級

var map = L.map('map').setView([51.505, -0.09], 13);

預設情況下 (因為我們在建立地圖實例時沒有傳遞任何選項)，地圖上所有滑鼠和觸控互動都已啟用，並且它具有縮放和屬性控制。

請注意，setView 呼叫也會傳回地圖物件 — 大多數 Leaflet 方法在沒有傳回明確值時都像這樣運作，這允許方便的 jQuery 式方法串聯。

接下來，我們將新增圖磚圖層到我們的地圖，在本例中，它是 OpenStreetMap 圖磚圖層。建立圖磚圖層通常涉及設定圖磚影像的URL 範本、屬性文字和圖層的最大縮放層級。OpenStreetMap 圖磚適用於編寫 Leaflet 地圖，但如果您要在生產環境中使用圖磚，請閱讀 OpenStreetMap 的圖磚使用政策。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

請確保所有程式碼都在 div 和 leaflet.js 包含之後呼叫。就是這樣！您現在有一個可運作的 Leaflet 地圖。

值得注意的是，Leaflet 不受供應商的限制，這表示它不會強制選擇特定的圖磚供應商。此外，Leaflet 甚至不包含單一供應商特定的程式碼行，因此如果需要，您可以自由使用其他供應商。

每當使用任何基於 OpenStreetMap 的內容時，都必須按照著作權聲明提供屬性。大多數其他圖磚供應商（例如Mapbox、Stamen 或Thunderforest）也需要提供屬性。請務必在適當的地方給予肯定。

標記、圓形和多邊形

查看這個獨立的範例。

除了圖磚圖層之外，您還可以輕鬆地將其他項目新增到地圖，包括標記、折線、多邊形、圓形和彈出視窗。讓我們新增一個標記

var marker = L.marker([51.5, -0.09]).addTo(map);

新增圓形相同（除了以公尺為單位指定半徑作為第二個參數），但允許您在建立物件時將選項作為最後一個引數傳遞來控制其外觀

var circle = L.circle([51.508, -0.11], {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 500
}).addTo(map);

新增多邊形也很容易

var polygon = L.polygon([
	[51.509, -0.08],
	[51.503, -0.06],
	[51.51, -0.047]
]).addTo(map);

使用彈出視窗

查看這個獨立的範例。

當您想要將一些資訊附加到地圖上的特定物件時，通常會使用彈出視窗。Leaflet 對此有一個非常方便的快捷方式

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

嘗試按一下我們的物件。bindPopup 方法會將具有指定 HTML 內容的彈出視窗附加到您的標記，因此當您按一下物件時會出現彈出視窗，而 openPopup 方法（僅適用於標記）會立即開啟附加的彈出視窗。

您也可以將彈出視窗用作圖層（當您需要的不僅僅是將彈出視窗附加到物件時）

var popup = L.popup()
	.setLatLng([51.513, -0.09])
	.setContent("I am a standalone popup.")
	.openOn(map);

在這裡，我們使用 openOn 而不是 addTo，因為它會處理在開啟新彈出視窗時自動關閉先前開啟的彈出視窗，這對可用性很有幫助。

處理事件

每當 Leaflet 中發生某些事情時，例如使用者按一下標記或地圖縮放發生變更，對應的物件會傳送一個事件，您可以使用函式訂閱該事件。它允許您回應使用者互動

function onMapClick(e) {
	alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

每個物件都有自己的一組事件 — 請參閱文件以了解詳細資訊。接聽程式函式的第一個引數是一個事件物件 — 它包含有關所發生事件的實用資訊。例如，地圖按一下事件物件（上面範例中的 e）具有 latlng 屬性，它是按一下發生位置的座標。

讓我們使用彈出視窗而不是警示來改進我們的範例

var popup = L.popup();

function onMapClick(e) {
	popup
		.setLatLng(e.latlng)
		.setContent("You clicked the map at " + e.latlng.toString())
		.openOn(map);
}

map.on('click', onMapClick);

嘗試按一下地圖，您將在彈出視窗中看到座標。檢視完整範例 →

現在您已經學習了 Leaflet 的基礎知識，可以立即開始建置地圖應用程式！別忘了查看詳細的文件或其他範例。