UMiP 推廣手冊

kewang

前言 (1/4)

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

前言 (2/4)

前言 (3/4)

● 但是 flickr 內建的地圖解析度不夠高，所以在定位常常會有偏差。

● 台灣的一位網友 CK 做了一個 GMiF 的 Firefox extension ，用 Google Maps 的高解析度在 flickr上定位。

前言 (4/4)

重點 (1/4)

● 現在台灣好像還沒有一個類似 flickr 如此結合地圖和相簿的網站。

重點 (2/4)

● 利用目前台灣最有名的電子地圖 UrMap 。

重點 (3/4)

● 和目前愈來愈火紅的 Pixnet 網路相簿。

重點 (4/4)

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

特色

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

使用方法 (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 的程式結束 -->

使用方法 (2/3)

● 圖資來源 ='urmap'● 地圖區塊 ='map'● 經度 =121.750265● 緯度 =24.750586● 名稱 ='kewang 的宿舍 '● 放大倍率 =9● 地圖高度 ='300px'● 是否隱藏經緯度 =true● 是否將焦點自動移至地圖區塊 =true

使用方法 (3/3)

● 之後開啟相簿主畫面，在每個相簿的敘述會出現 " 編輯經緯度 " ，按下去之後，可以利用UrMap 輸入該相簿的經緯度。

● 回到相簿首頁，可以看到有設定的相簿，會出現一個 K 形小圖，點選小圖後，就會看到 UMiP 移動到相簿的所在位置囉！

● 也可以使用 Firefox 的 Operator 套件，讀取microformat 的經緯度。 ( 尚未完工 )

TODO

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