- 如何放單純的地圖(可互動操作)
- 如何在網頁上放地圖並顯示 GPX 軌跡在地圖上
如何放單純的地圖(可互動操作)
- 連到 http://www.openstreetmap.org/
- 點選畫面最上面的 "Export" 功能
- 用滑鼠拖拉地圖區域
- 選擇格式
- OpenStreetMap XML Data, 這是 XML 資料檔
- Map Image (shows standard layer), 這是下載成圖片, 有 png,jpg,svg,pdf 格式
- Embeddable HTML, 網頁的 HTML 語法 --- 選這個，系統就會給你一段 <iframe 開頭的 html 碼
<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://www.openstreetmap.org/export/embed.html?bbox=118.05,20.8,124.63,26.26&layer=mapnik&marker=23.97120,121.21765" style="border: 1px solid black;" width="425"></iframe><br />
<small><a href="http://www.openstreetmap.org/?lat=23.53&lon=121.34&zoom=7&layers=M&mlat=23.97120&mlon=121.21765">View Larger Map</a></small>
會產生這樣的地圖:
View Larger Map
如何在網頁上放地圖並顯示 GPX 軌跡在地圖上
這比較複雜一點，我的方法是用 leaflet 這個 library 來畫地圖。 leaflet 可以加 plugin，配合 leaflet-gpx，就能畫 GPX 軌跡。
我參考作者的 demo，簡化之後：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/leaflet.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/leaflet-gpx/gpx.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/osm-gpx.js"></script>
<style type="text/css"> @import url('http://kcwu.csie.org/~kcwu/geo/osm-gpx.css');</style>
<section id='gpx_container' class=gpx ></section>
<script type="application/javascript">
simple_gpx($('#gpx_container'),
"http://kcwu.csie.org/~kcwu/geo/gpx/20130518 鷹仔尖.gpx",
{ title: '20130518 鷹仔尖.gpx', height: 400 });
</script>
上面這段 HTML code 可以做出下面這樣的地圖
使用說明：
- 一般使用只要改 simple_gpx 那三行就夠了，剩下不用動。
- 用到的檔案只有 osm-gpx.js 是我寫的，於 public domain 釋出。其他檔案是各 project 自己的(BSD或MIT授權)，可自由使用。
- 若同一頁會用多次，gpx_container 要改成其他名字(不能跟其他的重複，不然會錯亂)。前兩行(jquery.min.js 跟 leaflet.js)總共只要寫一次就好。
