話說print screen鈕或螢幕擷取軟體這麼好用,查好位置按一按再貼上,一張簡單的地圖就出來了,那我們又何苦去了解那些又臭又長的程式碼去寫那些程式呢?把UrMap嵌入在網誌或著是網頁中,目的就是為了讓讀者方便,有明顯的標的物,又可在上面加上註解,更可以放大縮小,最重要的是UrMap可以藉由拖拉來看到原本範圍內以外的地點,讓離目的地距離較遠的讀者也能明瞭如何從自己的所在地抵達目的地,連雅虎許多地方都使用這項技術,你說值不值得學?

  UrMap API目前提供了七個物件給我們使用(包括UMap、UMarker、UPolyline、UIcon、UPoint、ULatLng、UBounds),何謂物件呢?舉個例來說,就好比我們有七種不同的筆:鉛筆、鋼筆、原子筆、毛筆、彩色筆、蠟筆、水彩筆,當我們要素描的時候用鉛筆;當我們要寫生的時候用水彩筆;當我們要寫書法的時候用毛筆。物件就好比如此,當我們要建立地圖的細節時用UMap;當我們要在地圖建立標的的時候用UMarker;當我們要在地圖上劃線段的時候用UPolyline。(其他在後面會有較詳細的介紹 如有興趣可以先看 UrMap API文件 )



1.先來談談最基本的,每當我們要將UrMap放在網誌或是網頁時,開頭一定要打上

<script type="text/javascript" src="http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=授權碼"></script>

打上這行的目的,是我們要載入一個JavaScript檔,這個JavaScript檔,裡面就包含有地圖所要使用的所有東西。當然,要先把授權碼改上自己申請的,他才會讓你正常使用。(關於如何申請授權碼,請看 網誌內嵌入UrMap (懶人包) ) 



2.接下來,我們要用HTML建立一個空間給地圖顯示,通常都是使用<div>這個tag。

<div id="id_map" style="width:300px; height:300px;"></div>
              
第一個紅色部分為此區塊的id,要供之後的地圖物件使用。
第二、第三個紅色部份為此區塊的寬和高。



3.建立好給地圖使用的區塊後,我們可以開始建立第一個簡單的地圖了!

<script type="test/javascript">
   var map = new UMap(document.getElementById('id_map'));
   map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
</script>

第一行和第四行為javascript固定的tag,
第二行是在建立一個新的地圖物件,紅色部分為剛剛利用<div>tag建立的區塊之id。
第三行是移動地圖到25.035405(緯度), 121.520255(經度)這個位置。而9是地圖比例大小,可為0~9。
(想知道method型態的請到 UrMap API文件 觀看)



4.接下來我們就來牛刀小試,把剛剛的程式碼貼到自己的部落格試看看




(記得更改授權碼)

有得到以下的結果嗎?

arrow
arrow
    全站熱搜

    hellolucky 發表在 痞客邦 留言(0) 人氣()