2007年3月9日 星期五

UMiP - 結合UrMap以及Pixnet的網路相簿地圖

前言:

大家知道Flickr相簿有一個功能,就是可以把自己的相片放到網路地圖上面,讓網友們可以看到自己的相片是在哪一個地方拍的,台灣的一位網友CK看到了這個功能,就用Google Maps加上Flickr在Firefox上實作了一個叫做GMiF的套件。

我看到了這篇文章的介紹之後,就想要自己也來寫寫看,因為UrMap已經開放他們的API,讓大家都可以使用他們的API來自己做一個電子地圖,然後我本身也很愛用Pixnet,就來寫一個類似GMiF的功能,不過現在跟GMiF是有一點小落差啦。

使用方法:

1. 請先在管理介面 -> 相簿管理 ->「自訂區塊」裡面,插入下面的程式碼,之後儲存設定。

<!--這一段是UMiP的程式開頭-->

<div id="urmap"></div>
<!--請大家去UrMap申請授權碼,這樣才能合法使用UrMap-->
<!--申請方法請看:http://blog.pixnet.net/kewang/post/2942661-->
<script type = "text/javascript" language = "javascript" src = "http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=xxxxxxxxxxxxx"></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", 24.750586, 121.750265, "kewang的宿舍", 9, "300px", true);
</script>

<!--這一段是UMiP的程式結束-->

2. 之後開啟相簿主畫面,在每個相簿的敘述會出現"編輯經緯度",按下去之後,在經度和緯度上面利用UrMap,輸入該相簿的位置

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

備註:目前本程式,僅支援Firefox、Opera、Safari瀏覽器,不支援IE 6.0, 7.0





特別感謝Pigy幫我寫了這個教學還有一些idea,尤其是那個icon真是太讚了

參考資料:
UMiP - UrMap和Pixnet的結合

3 則留言:

MilchFlasche 提到...

按照教學順利地把地圖放到自己的相簿了!雖然還不能每張相片都釘地標,但這已經邁出一大步,很棒喔!謝謝!

kewang 提到...

XDDDD 總算有人理我了,我po在其他的版上都沒人鳥我 囧

sky008888 提到...

終於成功了, 才想說我的畫面好像跟你的不一樣...原來是忘記去申請新的key Orz