相信看了 Uramp API - 02 ,你已經對UrMap API有了基本的概念,稍微有程式底子的人應該能舉一反三,直接看 UrMap API說明文件 寫出想要的功能.如果你還是一知半解,沒關係!接下來還會陸續在介紹越來越多東西,甚至還會做一些範例供大家參考!
這個章節開始我要講的是UMap的部分函式(有些太艱深且跟其他東西關聯性較大的後面再補充!).
(表格內容取自 UrMap API文件 )
建構式 | 說明 |
UMap(container) | 在指定的 HTML container(HTML element,通常是一個 DIV element) 內建立一個地圖。 |
函式 | 說明 |
addControl(type) | 在地圖上要加入要使用的控制列。 |
centerAndZoom(latLng, zoomLevel) | 將地圖的中心點移動至指定的經緯度坐標 latLng(ULatLng) 並縮放到指定的顯示層級 zoomLevel(integer)。若是新的中心點也位在原本的地圖範圍之內時,地圖會以滑動的方式移至新的中心點。 |
centerMap(latLng) | 將地圖的中心點移動至指定的經緯度坐標 latLng(ULatLng),不改變目前的顯示層級。 |
zoomMap(zoomLevel) | 將縮放到指定的顯示層級 zoomLevel(integer)。目前所支援最小的 zoomLevel 值為 0,最大為 10* (1.06版起才開放到 10)。 |
zoomIn() | 將地圖放大一個顯示層級。 |
zoomOut() | 將地圖縮小一個顯示層級。 |
refreshMap() | 重新顯示目前的地圖。 |
checkResize() | 當地圖的 container 元件大小改變時,須呼叫此一函式以提醒 UMap 物件重新計算並調整地圖涵蓋範圍。 |
setMapType(type) | 設定要使用的地圖模式,有電子地圖(U_MAP_TYPE)、衛星影像(U_SATELLITE_TYPE)及衛星地圖(U_HYBRID_TYPE)等三種模式可以設定。 |
setMapAction(action) | 設定要使用的地圖操作模式,有平移模式(U_PAN_ACTION)、測距模式(U_MEASURE_ACTION)及框選模式(U_BOX_ACTION)等三種。 |
enableDragging() | 開啟地圖可被拖曳的功能。 |
disableDragging() | 取消地圖可被拖曳的功能。當此一函式呼叫後,地圖僅能透過程式呼叫方能改變中心位置,滑鼠將無法拖動地圖。 |
showControls() | 顯示所有已加入的控制列。 |
hideControls() | 隱藏所有已加入的控制列。 |
getCenter() | 取得目前地圖中心點的經緯度坐標(ULatLng)。 |
getZoomLevel() | 取得目前地圖的顯示層級(integer)。 |
getCurrentMapType() | 取得目前使用中的地圖模式,其值可能為電子地圖(U_MAP_TYPE)、衛星影像(U_SATELLITE_TYPE)及衛星地圖(U_HYBRID_TYPE)等三種。 |
openInfoWindow(latLng, html, dialogWidth?, dialogHeight?) | 在地圖上的 latLng(ULatLng) 經緯度位置上開啟一個訊息視窗,視窗的內容為 html(string,內容可包含 HTML 語法)。若要控制訊息視窗的大小,可選擇性傳入 dialogWidth 與 dialogHeight 參數,代表訊息顯示區域的長寬 pixel 值,若未傳入則使用預設大小。 |
closeInfoWindow() | 關閉地圖上的訊息視窗。 |
savePosition() | 將目前地圖顯示的地點記錄起來。 |
returnToSavedPosition() | 將地圖回復到上一次記錄的地點。 |
看這麼多東西,看的頭都暈了對不對?沒關係,「To see is to believe!」(眼見為憑),現在我們把所有列出的功能用一些方法讓你可以看到其中的變化,讓你自己實驗看看,分辨功能的差別與用途.
首先,第一個範例,我們所要介紹的是addControl()這個函式,他主要是讓地圖上便增加控制列,目前提供的選項有四種,U_FULLZOOM_CONTROL、U_MINIZOOM_CONTROL、U_TYPE_CONTROL、U_SCALE_CONTROL.
U_FULLZOOM_CONTROL(與U_MINIZOOM_CONTROL只能則一)
![](https://pic.pimg.tw/hellolucky/1187766604.jpg)
U_MINIZOOM_CONTROL(與U_FULLZOOM_CONTROL只能則一)
![](https://pic.pimg.tw/hellolucky/1187766737.jpg)
U_TYPE_CONTROL
![](https://pic.pimg.tw/hellolucky/1187766907.jpg)
U_SCALE_CONTROL
![](https://pic.pimg.tw/hellolucky/1187766850.jpg)
現在讓我們來試試看
(以下為範例程式碼 記得更改授權碼)
全站熱搜