當我們需要在網頁上呈現地圖的時候,Google Map是最常考慮的應用,不過還有其它不錯的選擇,Leaflet 即是其中之一,這是一個開放式的地圖應用,具豐富的功能,且針對行動裝置優化,相當好用。
要建立上述的地圖相當簡單,首先匯入必要的css與JavaScript函式庫:
接下來撰寫所需的Script:
要建立上述的地圖相當簡單,首先匯入必要的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 ©
<a href="http://openstreetmap.org">OpenStreetMap</a>contributors, ' +
'Map data ©
<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>
"<b>Taiwan 地理中心</b>").openPopup();
</script>
由於這裏打算呈現的是台灣地理中心,因此將中心座標 23.973875, 120.982024 當作參數傳入其中紅色標示的位置即可。
沒有留言:
張貼留言