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 當作參數傳入其中紅色標示的位置即可。




沒有留言: