Lance 輕鬆過生活

最近想在寫個美味食記,想在pixnet內加入urmap地圖, 網路上找資料,先是去urmap API網站看, 對程式不熟的我, 試了很久都沒辦法, 最後成功是因為看了kewang的部落格的說明,但是在pixnet編輯時若切換編輯器,或儲存再回來編輯時,程式碼就又亂掉了, 中間多了一堆<br/>的換行指令,以下是我的心得與做法:
要在自己的blog裡插入地圖其實最簡單的做法就是上urmap或google map 把地圖snap下來再貼在自己的網頁上,但是這樣似乎有侵權的可能,所以要做的漂亮一點,就是乖乖用urmap的api把地圖放進來, 而且還能讓人放大縮小與移動地圖,實用性比較高
做法如下,
1. 先申請UrMap API授權碼 urmap會將授權碼寄到您的信箱
2. 複製程式碼, 若下面這個顯示方式可以接受,就只要把圖下面程式碼複製回去,在pixnet 原始碼的地方貼上

程式碼:
<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: 480px; height: 360px;" ></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; function createUrMap (mapId, lat, lng, desc){ var map = new UMap (document.getElementById(mapId)); map.addControl(U_FULLZOOM_CONTROL); map.addControl (U_SCALE_CONTROL); var point = new ULatLng(lat, lng); map.centerAndZoom(point, 9); var marker = new UMarker(point, myIcon); marker.addListener('click', function() { alert(desc); }); map.addOverlay(marker); }  align="center">createUrMap("urmap", 25.078103, 121.57361, "台北花市"); </script>

3. 修改上面紅色的地方(授權碼跟座標)就好了

座標可以去urmap查,先找到地方,按右鍵