Leaflet 是一套適用於各種平台的 JavaScript 地圖繪製工具，可以呈現類似 Google 地圖的效果。

要在網頁上呈現地圖，除了大多數人所熟知的 Google 地圖之外，Leaflet 也是一套很不錯的工具，它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫，其所呈現的效果與 Google 地圖非常相似，主要的特色是使用簡單、速度快，並且跨平台，許多知名網站（如 GitHub 與 Flickr 等）都是使用 Leaflet 來呈現地圖。

以下是 Leaflet 的使用教學，以及一些入門範例。

基本使用教學

Step 1

首先從 Leaflet 的網站上下載 Leaflet 的 JavaScript 函式庫，並引入網頁中：

<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>

或是使用官方提供的 CDN 服務：

<link rel="stylesheet" href="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@0.7.7/dist/leaflet.js"></script>

Step 2

在網頁中加入一個 <div> 元素，並且指定一個任意的 id：

<div id="mapid"></div>

Step 3

在 CSS 的設定中，加入 <div> 元素的高度設定：

#mapid { height: 180px; }

Step 4

加入 JavaScript 程式碼：

<script type="text/javascript">

  // 建立 Leaflet 地圖
  var map = L.map('mapid');

  // 設定經緯度座標
  map.setView(new L.LatLng(22.992, 120.239), 12);

  // 設定圖資來源
  var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 16});
  map.addLayer(osm);

</script>

畫出來的地圖會像這樣：

圖資可以自行選擇，除了 OpenStreetMap 之外，也可以使用 Mapbox 的圖資，使用方式可以參考 Leaflet 的官方教學。

加入圖標

以 L.marker 加入 marker：

var marker = L.marker([22.992, 120.239]).addTo(map);

以 L.circle 加入圓圈：

var circle = L.circle(
  [22.988, 120.220],   // 圓心座標
  1000,                // 半徑（公尺）
  {
    color: 'red',      // 線條顏色
    fillColor: '#f03', // 填充顏色
    fillOpacity: .5   // 透明度
  }
).addTo(map);

以 L.polygon 加入多邊形：

var polygon = L.polygon([
  [22.992, 120.289],
  [22.982, 120.299],
  [22.970, 120.267],
  [22.990, 120.267]
]).addTo(map);

這是加上各種圖標的地圖：

加入訊息方塊

以 bindPopup 將圖標加上訊息方塊：

marker.bindPopup("<strong>地標</strong><br>標示的位置。").openPopup();
circle.bindPopup("這是圓圈。");
polygon.bindPopup("這是多邊形。");

也可以在地圖上建立獨立的訊息方塊：

var popup = L.popup()
    .setLatLng([23.010, 120.289])
    .setContent("獨立的訊息方塊。")
    .openOn(map);

事件處理

在地圖上加入事件處理的 JavaScript 程式碼，當使用者點擊地圖時，顯示經緯度座標：

function onMapClick(e) {
    alert("經緯度座標：" + e.latlng);
}

map.on('click', onMapClick);

這是加入事件處理的地圖，用滑鼠點擊地圖就會顯示經緯度座標：

結合事件處理與訊息方塊，提供比較好的使用者體驗：

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("經緯度座標：" + e.latlng.toString())
    .openOn(map);
}

map.on('click', onMapClick);

這樣用滑鼠點擊地圖之後，就會以訊息方塊顯示經緯度座標：

參考資料