Leaflet 是一套適用於各種平台的 JavaScript 地圖繪製工具,可以呈現類似 Google 地圖的效果。
要在網頁上呈現地圖,除了大多數人所熟知的 Google 地圖之外,Leaflet 也是一套很不錯的工具,它是一套開放原始碼的輕量級 JavaScript 網頁地圖函式庫,其所呈現的效果與 Google 地圖非常相似,主要的特色是使用簡單、速度快,並且跨平台,許多知名網站(如 GitHub 與 Flickr 等)都是使用 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(map); } map.on('click', onMapClick);
這樣用滑鼠點擊地圖之後,就會以訊息方塊顯示經緯度座標:
除了 Google 地圖與 Leaflet 之外,還有一套地圖工具叫做 OpenLayers,其中的差異可以參考 Robin Lovelace 的文章。
參考資料:SWITCH2OSM