http://blog.pixnet.net/kewang UMiP官方網站

1. UMiP 推廣手冊
kewang

2. 前言 (1/4)
國外的 flickr 相簿，有一個 geotagging 的功能。
●
也就是將一張一張的相片加上經緯度的資訊，然
●
後放到地圖上面，網友們都可以看到你用
geotagging 之後的相片。
這也是 Web 2.0 網站的實作之一。
●

3. 前言 (2/4)

4. 前言 (3/4)
但是 flickr 內建的地圖解析度不夠高，所以在定
●
位常常會有偏差。
台灣的一位網友 CK 做了一個 GMiF 的 Firefox
●
extension ，用 Google Maps 的高解析度在 flickr
上定位。

5. 前言 (4/4)

6. 重點 (1/4)
現在台灣好像還沒有一個類似 flickr 如此結合地
●
圖和相簿的網站。

7. 重點 (2/4)
利用目前台灣最有名的電子地圖 UrMap 。
●

8. 重點 (3/4)
和目前愈來愈火紅的 Pixnet 網路相簿。
●

9. 重點 (4/4)
將上述兩個網站 mashup 起來，做了一個
●
UMiP(UrMap in Pixnet) 的小程式。

10. 特色
自訂預設的敘述和經緯度
●
自訂是否隱藏經緯度
●
利用 pixnet 內建功能新增經緯度
●
按下相簿之後，可以顯示圖片
●
跨瀏覽器
●
若非相簿本人，就不會出現編輯經緯度
●
改為 microformats 的 geo 格式
●

11. 使用方法 (1/3)
請先在管理介面 -> 相簿管理 -> 「自訂區塊」裡面，插
●
入下面的程式碼，之後儲存設定。
<!-- 這一段是 UMiP 的程式開頭 -->
●
<!-- 請大家去 UrMap 申請授權碼，這樣才能合法使用 UrMap-->
●
<!-- 申請方法請看： http://blog.pixnet.net/kewang/post/2942661-->
●
<div id="map"></div>
●
<script type = "text/javascript" language = "javascript" src =
●
"http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=foobar"></script>
<script type = "text/javascript" language = "javascript" src =
●
"http://dspic.niu.edu.tw/~kewang/pixnet/widget/umip.js"></script>
<script type = "text/javascript" language = "javascript">
●
// 圖資來源 , 地圖區塊 , 經度 , 緯度 , 名稱 , 放大倍率 , 地圖高度 , 是否隱藏經緯度 , 是否將焦
●
點自動移至地圖區塊
initUMiP('urmap', 'map', 121.750265, 24.750586, 'kewang 的宿舍 ', 9, '300px', true, true);
●
</script>
●
<!-- 這一段是 UMiP 的程式結束 -->
●

12. 使用方法 (2/3)
圖資來源 ='urmap'
●
地圖區塊 ='map'
●
經度 =121.750265
●
緯度 =24.750586
●
名稱 ='kewang 的宿舍 '
●
放大倍率 =9
●
地圖高度 ='300px'
●
是否隱藏經緯度 =true
●
是否將焦點自動移至地圖區塊 =true
●

13. 使用方法 (3/3)
之後開啟相簿主畫面，在每個相簿的敘述會出
●
現 " 編輯經緯度 " ，按下去之後，可以利用
UrMap 輸入該相簿的經緯度。
回到相簿首頁，可以看到有設定的相簿，會出現
●
一個 K 形小圖，點選小圖後，就會看到 UMiP 移動
到相簿的所在位置囉！
也可以使用 Firefox 的 Operator 套件，讀取
●
microformat 的經緯度。 ( 尚未完工 )

14. TODO
加入 Google Maps
●
寫成 Firefox 的 Extension
●
直接在地圖上定位
●
希望能加入 Pixnet 官方功能
●