2007年2月24日 星期六

把UrMap放在Blog上面

我想要把我這台La Fonera的位置顯示在Blog上面。
既然是跟位置有關,那當然要用到台灣電子地圖的龍頭UrMap啦(這是我自己覺得啦 XDDDDD),而且UrMap有公開的API,所以更可以有彈性的自訂地圖啦。

要使用UrMap的API,就要先到官方網站去申請授權碼,有了授權碼才能合法的使用API,
這邊就自己看圖吧,申請應該不是太難的事。







申請好之後,就回信箱看看有沒有UrMap的授權碼。



有了授權碼之後,接下來就是一樣要用自訂欄位把下面的語法貼上

<script type="text/javascript" src="http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=xxxxxxxxxxxxx&charset=utf-8"></script>
<div id="urmap" style="width: 180px; height: 300px;" ></div>
<div id="urmap_lat_lng"></div>
<script type="text/javascript">
var myIcon = new UIcon();

myIcon.image = 'http://www.urmap.com/SearchEngine/api/img/s.gif';
myIcon.iconWidth = 26;
myIcon.iconHeight = 30;
myIcon.iconAnchor = new UPoint(13, 30);
myIcon.infoWindowAnchor = new UPoint(13, 0);

function createUrMap(mapId, lat, lng, desc, latlngMsgId){
var map = new UMap(document.getElementById(mapId));
map.addControl(U_MINIZOOM_CONTROL);
var point = new ULatLng(lat, lng);
map.centerAndZoom(point, 8);

var marker = new UMarker(point, myIcon);
marker.addListener('click', function() {
alert(desc);
});
map.addOverlay(marker);
}
createUrMap("urmap", 24.7501926422, 121.750038147, "kewang在宜蘭的家", "urmap_lat_lng");
</script>

第一處紅色的地方就是要把你的授權碼貼在這裡,這樣才能合法使用UrMap。

第二處就是要把你想要標示出來地方的經緯度貼在這裡。
要怎麼才能查你的經緯度呢?首先進入UrMap網站,然後在你想要標示的地方按右鍵,然後選擇"查詢經緯度坐標",就會知道經緯度了。



然後把緯度貼在第二個參數,經度貼在第三個參數,第四個參數就是你對這個地方的敘述啦。大功告成!



其實還有很多東西可以修改的,自己就看說明文件吧。

參考資料:
UrMap API v1.06 說明文件
試玩 UrMap

15 則留言:

tulipsrose 提到...

你好~我是從urmap API連過來的
(奇怪,我之前怎麼沒看到這篇)
謝謝你的教學
只是,為了試驗,我把你提供的程式碼全部直接貼去我的文章裡(註冊碼有改成我的)
地圖還是無法顯示
而且還說某行的語法有誤
請問這是什麼問題?該如何解決呢?
先謝謝您的不吝回答嚕^^

kewang 提到...

你可以把你的那一段語法再放上去你的blog嗎??

這樣我也好知道是哪裡出問題

tulipsrose 提到...

我把語法放在
http://blog.pixnet.net/tulipsrose/post/3624962裡
幾乎都跟您的一模一樣
只改了座標、描述和註冊碼
有勞您了~~(感謝熱心的大人^^)

kewang 提到...

你試試在發表文章的時候,把"不要系統自動換行,建議從Dreamweaver之類編輯器複製原始碼時使用"打勾看看
應該就可以了

tulipsrose 提到...

大大!您回文速度超快ㄋㄟ
超感恩!!真的成功了耶!!
謝謝您那麼有耐心的教導我這程式白痴
你是好人^^

kewang 提到...

Orz 又被發卡了

tulipsrose 提到...

kewang大大
我想在我的文章中加入你的範例
還有延伸閱讀您的網站連結,可以嗎^^a
謝謝

kewang 提到...

當然可以呀,我非常歡迎

tulipsrose 提到...

大大
說實話,我有發出2次引用通知
可是我來您的blog看卻沒有,我以為是您沒放入"引用"欄位在版面所以看不到
你願意再敎我怎麼"引用"嗎,謝謝老師

kewang 提到...

應該不難吧,把http://blog.pixnet.net/kewang/trackback/9f96a04d83/2942661這一串放到發送引用通告就可以了,
應該也只有這個方法可以行的通

tulipsrose 提到...

我又知道我錯在哪了
我把引用網址打你這篇文章的網址^^"
我立即去放喔,謝謝

kewang 提到...

XDDDD 原來又是耍笨了

張y 提到...

很棒的教學!
(從ptt連結來的)

不過我發現firefox似乎無法顯示

不過還是謝謝你的教學^^

版主回覆:(05/19/2009 03:55:46 PM)


可以吧,我在你的blog上用fx看到了耶。

yama0125 提到...

我也在你這學,用在我的網站上了,謝謝

版主回覆:(10/16/2007 05:47:52 AM)


不會啦,有問題儘管提出來吧。

Cherry 提到...

您好:我想要做一個網頁裡可以嵌入urmap的搜尋bar及地圖,請問您教的方法是只能看到地圖--可以增加搜尋bar?感謝您

版主回覆:(02/11/2008 06:19:05 AM)


搜尋列......

我不太清楚耶,現在的API好像也不支援搜尋列耶。