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

要在網頁上呈現地圖,除了大多數人所熟知的 Google 地圖之外,Leaflet 也是一套很不錯的工具,它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫,其所呈現的效果與 Google 地圖非常相似,主要的特色是使用簡單、速度快,並且跨平台,許多知名網站(如 GitHubFlickr 等)都是使用 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: 0.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(mymap);
}

map.on('click', onMapClick);

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

除了 Google 地圖與 Leaflet 之外,還有一套地圖工具叫做 OpenLayers,其中的差異可以參考 Robin Lovelace 的文章

參考資料:SWITCH2OSM