Open-Source 地圖 - Leaflet

當我們需要在網頁上呈現地圖的時候，Google Map是最常考慮的應用，不過還有其它不錯的選擇，Leaflet 即是其中之一，這是一個開放式的地圖應用，具豐富的功能，且針對行動裝置優化，相當好用。

要建立上述的地圖相當簡單，首先匯入必要的css與JavaScript函式庫：

<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet"></link>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

接下來撰寫所需的Script：

<script>

// 定義地圖

var map = L.map('map').setView([23.973875, 120.982024],7);

// 呈現圖資

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {

           maxZoom: 18,

           attribution:
                'Map data &copy;
                      <a href="http://openstreetmap.org">OpenStreetMap</a>contributors, ' +

               '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

               'Imagery © <a href="http://mapbox.com">Mapbox</a>',

           id: 'examples.map-i875mjb7'

  }).addTo(map);

// 顯示特定座標標記

L.marker([23.973875, 120.982024]).addTo(map).bindPopup(
    "<b>Taiwan 地理中心</b>").openPopup();

</script>

由於這裏打算呈現的是台灣地理中心，因此將中心座標 23.973875, 120.982024 當作參數傳入其中紅色標示的位置即可。