UrMap API 說明文件

UrMap API v2.0 說明文件 (What's News)

2.0版重大更新事項： 2.0版以後，為了提供更快速、可靠的API服務，取得API的網址由原本的http://www.urmap.com/SearchEngine/api/getapi.jsp 改成 http://api.urmap.com/js/getapi.php，原本的API路徑已更新為最新版(2.0)，但是此後不再提供更新，若要取得最新的API請將網址改為新的API路徑。建議不管您是否想更換新的API，都要將路徑改為新的API路徑，以取得更快速更可靠的服務。修改範例：

原本：http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=xxx

改成1.09版：http://api.urmap.com/js/getapi.php?v=1&key=xxx
改成2.0版：http://api.urmap.com/js/getapi.php?v=2&key=xxx
改成最新版本(2.0.1)：http://api.urmap.com/js/getapi.php?v=latest&key=xxx

UrMap JavaScript API 讓您可以在自己的網頁上嵌入 UrMap 電子地圖。在使用 UrMap API 之前您需要先申請一組授權碼並且遵照下面的說明進行。

由於這套 API 才剛剛開發出來，在使用上可能會有一些 bug 發生，請多多利用 UrMap API Blog 向我們回報錯誤或提出相關建議，我們會盡快解決。

^NEW隨需載入UrMap API

簡介: 對象; 跟 UrMap 說聲 Hello World; 嵌入 UrMap API; 瀏覽器相容性; API 更新; 地址定位、地標搜尋、導航等其他服務
範例: 基本; 改變地圖中心位置; 為地圖設定控制列; 監聽事件(event); 開啟訊息視窗; 增加地標及線段; Click 處理; 在地標上顯示 mouse on 訊息; 在地標上顯示訊息視窗; 自訂地標圖示; 從地圖上框選特定範圍^Modified; 在地圖上建立一個縮略地圖UOverviewMapControl^New; 利用UOverlayManager管理大量Marker^New; 將圖片放到地圖上^New; UInfoWindowOptions更豐富的訊息視窗^New; addStaticOverlay靜態的套疊物件^New

疑難排解
API 概述: UMap 類別; 訊息視窗; 套疊物件(Overlays); 控制列; 地圖操作模式
類別說明: UMap^{NEW Function}; UOverviewMapControl^NEW; UOverlayManager^NEW; UInfoWindowTab^NEW; UInfoWindowOptions^NEW; UMarker^{NEW Function}; UPolyline; UPolygon^NEW; UCircle^NEW; UDom^NEW; UIcon; UPoint; ULatLng^{NEW Function}; UBounds

簡介

對象

要利用 UrMap API 進行開發之前您必須先熟悉 Javascript 語法及物件導向程式設計，同時也應該熟悉 UrMap 的網站操作。

跟 UrMap 說聲 Hello World

觀看範例是開始學習 UrMap API 的最簡易方式，下面的網頁會顯示一個以中正紀念堂為中心，大小 500x400 的地圖：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>UrMap API 範例 - 基本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://api.urmap.com/js/getapi.php?v=2&key=123"></script>
    <script type="text/javascript">
      function init() {
        var map = new UMap(document.getElementById('map'));
        map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
      }
    </script>
  </head>
  <body onload="init();">
    <div id="map" style="width:500px; height:400px; border:1px solid red;">
    </div>
  </body>
</html>

您可以自行下載這個範例檔並試著修改看看有何變化，但切記您必須先換上您自己所申請的授權碼，否則您的程式將無法通過網址檢核。( 每一組授權碼僅適用於申請時所填寫的網址目錄 )

嵌入 UrMap API

在上述範例中所列出的 URL (http://api.urmap.com/js/getapi.php?v=2) 是用來在您的網頁中嵌入 UrMap 電子地圖前所必須載入 Javascript 檔的網址。您的網頁必須包含一個指向此 URL 的 <script> tag，同時搭配上您所申請的授權碼，如果您得到的授權碼是「abcdefg」，則您的寫法會像下面這樣：

<script src="http://api.urmap.com/js/getapi.php?v=2&key=abcdefg"
              type="text/javascript">
</script>

其中 v=1 的部份表示您目前使用的是 v1 版的 UrMap API，此一 URL 會自動在網頁中嵌入 v1 版目前最新的 API，若未來我們推出 v2 版 API 時，您只需要將 v=1 更改為 v=2 即可切換為嵌入 v2 版 API。

由於 UrMap API 預設是使用 UTF-8 編碼，如果您的網頁是使用 Big5 編碼的話，請在上述 URL 中加入 charset=Big5 的參數以避免出現亂碼，完整的語法如下所示：

<script src="http://api.urmap.com/js/getapi.php?v=2&key=abcdefg&charset=Big5"
              type="text/javascript">
</script>

在 UrMap API 中最主要的類別就是用來代表網頁上每一幅地圖的 UMap，您可以在同一個網頁中創造出多個 UMap 物件以嵌入多張地圖。當您在創造一個新的 UMap 物件時，必須指定一個網頁元件 ( 通常是用 DIV 元件 )，UrMap API 會自動依照該元件的大小將地圖嵌入其中。

後面我們會詳細描述如何對地圖進行操作以及加上地標的方法。

瀏覽器相容性

UrMap API 目前支援下列瀏覽器版本，如果您發現有其他可正常運作的瀏覽器我們未列出，歡迎到 UrMap API Blog 留言告訴我們。

IE 6.0+
Firefox 1.0+
Safari 1.2+
Google Chrome

API 更新

UrMap 開發小組會持續對 API 進行 bug 修正與效率改進，更新後的 API 會自動生效，您所開發的程式無須做任何變動即可套用到最新的 API。

地址定位、地標搜尋、導航等其他服務

UrMap API 目前並不包含地址定位、地標搜尋或是導航等服務，若是您有特殊需求要向本公司租用這些服務，請與本公司業務人員聯絡。

範例

接下來的每個範例都只列出相關的 Javascript 程式碼的部份，而不是完整的 HTML 檔，您可以自行將這些程式片段插入您的 HTML 檔中，或是直接下載每個範例中的 HTML 檔回去修改。

基本

下面的範例 ( 跟前面提過的相同 ) 會產生一個以中正紀念堂為中心的地圖，您可以自由的用滑鼠拖曳此地圖。

var map = new UMap(document.getElementById('map'));
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

觀看範例(basic.html)

改變地圖中心位置

centerMap 函式是用來設定地圖的中心位置，若新的中心點位置有包含在目前的地圖顯示範圍內時，地圖以滑動的方式移至新中心點，反之則會直接跳至新的中心點位置。

下面的範例會先顯示中正紀念堂的地圖，然後在兩秒後移動到向東 0.003 度(經度)的地方。

var map = new UMap(document.getElementById('map'));
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
setTimeout(function() {
  map.centerMap(new ULatLng(25.035405, 121.523255));
}, 2000);

觀看範例(animate.html)

為地圖加上控制列

如果要在地圖上加上可以操作地圖的控制列，您必須使用 addControl 函式，在下面的範例中我們在地圖中加上了一個完整的縮放工具列 ( U_FULLZOOM_CONTROL ) 及一個衛星地圖切換工具列 ( U_TYPE_CONTROL )。

var map = new UMap(document.getElementById('map'));
map.addControl(U_FULLZOOM_CONTROL);
map.addControl(U_TYPE_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);

觀看範例(controls.html)

監聽事件(event)

UMap 物件支援事件監聽的功能，想要監聽特定的事件，只要呼叫 UMap 的 addListener 函式，傳入要監聽的事件種類以及事件發生時負責處理的函式做為參數即可。在下面的範例中，只要每次有人拖曳地圖之後，地圖下方名為 message 的 DIV 中就會顯示出目前地圖中心點的經緯度坐標。

var map = new UMap(document.getElementById('map'));
map.addListener('moveend', function() {
  var center = map.getCenter();
  var str = '緯度:'+center.lat() + ', 經度:' + center.lng();
  document.getElementById('message').innerHTML = str;
});
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

觀看範例(event.html)

開啟訊息視窗

要在地圖上開啟訊息視窗，您可以呼叫 openInfoWindow 函式，傳入要開啟訊息視窗的坐標點以及要顯示在視窗內的 HTML 內容為參數即可。通常您會在地標(marker)上開啟訊息視窗，但其實在地圖上的任何地點您都可以開啟訊息視窗。下面的範例會在地圖的中心點開啟一個顯示有 Hello World 及 UrMap Logo 的訊息視窗。

var map = new UMap(document.getElementById('map'));
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
map.openInfoWindow(map.getCenter(), '<b>Hello World<\/b><br><img src="http://www.urmap.com/SearchEngine/img2/logo2.gif">');

觀看範例(infowindow.html)

增加地標及線段

要在地圖上某個坐標的位置增加地標，首先要產生一個代表該坐標的 ULatLng 物件，然後用這個 ULatLng 物件來產生一個 UMarker 物件，最後再把這個 UMarker 傳給 addOverlay 函式即可；若要在地圖上增加任意折線段的話，則要先將此折線段所有經過的轉折點坐標存成一個 ULatLng 陣列，再用此坐標陣列來產生一個 UPolyline 物件，最後同樣呼叫 addOverlay 函式即可。下面的範例會在地圖上隨機產生十個地標，並依序將這十個地標用一折線段連接起來。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);
var bounds = map.getBounds();
var width = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var height = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
var points = new Array();
for (var i = 0; i < 10; i++) {
  var point = new ULatLng(bounds.getSouthWest().lat() + height * Math.random(), bounds.getSouthWest().lng() + width * Math.random());
  var marker = new UMarker(point);
  map.addOverlay(marker);
  points.push(point);
}
var polyline = new UPolyline(points, '#F00', 4, 0.5);
map.addOverlay(polyline);

觀看範例(overlay.html)

Click 處理

要處理地圖上的 click 事件，同樣要呼叫 UMap 的 addListener 函式並傳入 'click' 事件類型。在下面的範例中，當您在地圖的任何地方 click 一下，程式會自動在您 click 的地方增加一個地標，反之若是您在地標上 click 一下，程式就會將該地標移除。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.addListener('click', function(overlay, latLng) {
  if(overlay)
    map.removeOverlay(overlay);
  else if(latLng)
    map.addOverlay(new UMarker(latLng));
});
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);

觀看範例(click.html)

在地標上顯示 mouse on 訊息

在下面的範例中，我們為每個地標設定各自不同的 mouse on 訊息方便使用者快速了解地標內容。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

// 函式：用來產生一個會顯示指定號碼在訊息視窗中的地標
function createMarker(point, number) {
  var label = '地標 #<b>' + number + '</b>';
  var desc = '這是 [' + label + '] 的介紹內容....<br>使用 HTML 語法的第二行';
  var marker = new UMarker(point, null, label, desc); // 第二個參數使用 null 表示要使用 API 預設的圖示
  return marker;
}

// 加入十個隨機產生的地標
var bounds = map.getBounds();
var width = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var height = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
for (var i = 0; i < 10; i++) {
  var point = new ULatLng(bounds.getSouthWest().lat() + height * Math.random(), bounds.getSouthWest().lng() + width * Math.random());
  var marker = createMarker(point, i+1);
  map.addOverlay(marker);
}

觀看範例(markermouseon.html)

在地標上顯示訊息視窗

在下面的範例中，我們藉由監聽每個地標的 click 事件來在每個地標上開啟各自不同的訊息視窗。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

// 函式：用來產生一個會顯示指定號碼在訊息視窗中的地標
function createMarker(point, number) {
  var marker = new UMarker(point);
  var html = '地標 #<b>' + number + '</b>';
  marker.addListener('click', function() {
    marker.openInfoWindow(html);
  });
  return marker;
}

// 加入十個隨機產生的地標
var bounds = map.getBounds();
var width = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var height = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
for (var i = 0; i < 10; i++) {
  var point = new ULatLng(bounds.getSouthWest().lat() + height * Math.random(), bounds.getSouthWest().lng() + width * Math.random());
  var marker = createMarker(point, i+1);
  map.addOverlay(marker);
}

觀看範例(markerinfowindow.html)

自訂地標圖示

下面的範例會教您如何利用自訂的圖示來呈現地標，您必須在程式中指定新圖示的圖檔位置、圖示大小、圖示與地標實際對齊的位置(iconAnchor)以及訊息視窗與圖示對齊的位置(infoWindowAnchor)等資料才能利用新的圖示來表示地標。

// 先產生一個自訂圖示的 UIcon
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);

// 產生地圖
var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

// 函式：用來產生一個使用自訂圖示的地標
function createMarker(point) {
  var marker = new UMarker(point, myIcon);
  marker.addListener('click', function() {
    marker.openInfoWindow('Hello!');
  });
  return marker;
}

// 加入十個隨機產生的地標
var bounds = map.getBounds();
var width = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var height = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
for (var i = 0; i < 10; i++) {
  var point = new ULatLng(bounds.getSouthWest().lat() + height * Math.random(), bounds.getSouthWest().lng() + width * Math.random());
  var marker = createMarker(point);
  map.addOverlay(marker);
}

觀看範例(icon.html)

從地圖上框選特定範圍

下面的範例會教您如何運用地圖的框選操作模式，您必須撰寫一個回呼函式(callback function)以處理系統傳給您的框選範圍，另外範例中也利用一個按鈕元件的 onclick 事件來啟動地圖的框選模式。

// 先在函式外部宣告一個全域 map 變數，以便整個網頁的函式均可存取 map 變數
var map;
function init() {
  map = new UMap(document.getElementById('map'));
  map.addControl(U_MINIZOOM_CONTROL);
  map.addControl(U_SCALE_CONTROL);
  // 先將 boxCallback 函式設為框選模式的回呼函式
  map.setBoxActionCallback(boxCallback);
  map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
}
// 當框選模式結束時，系統會呼叫此一函式並將框選範圍以 UBounds 物件傳入
function boxCallback(bounds) {
  var str = '最小緯度: '+bounds.getSouthWest().lat();
  str += '<br>最大緯度: '+bounds.getNorthEast().lat();
  str += '<br>最小經度: '+bounds.getSouthWest().lng();
  str += '<br>最大經度: '+bounds.getNorthEast().lng();
  document.getElementById('message').innerHTML = str;
}

另外我們在網頁中也放置一個如下的按鈕元件來啟動框選模式

<input type="button" value="進入框選模式" onclick="map.setMapAction(U_BOX_ACTION);">

註: 原1.06版API中當框選完畢之後框框會立刻消失，自1.09版起框選結束時框框仍會留在畫面上，待使用者再次click或移動地圖後才會消失。

觀看範例(box.html)

在地圖上建立一個縮略地圖UOverviewMapControl^NEW

下面的範例會教您如何在地圖上建立一個縮略地圖(UOverviewMapControl)。

var map = new UMap(document.getElementById('map'));
map.addControl(U_FULLZOOM_CONTROL);
map.addControl(U_TYPE_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);
var UOverviewControl = new UOverviewMapControl(150, 150);
UOverviewControl.id = 'UOverviewControl';
map.addControl(UOverviewControl, ULeftBottom, new UPoint(0, 0));//UCenterCenter || ULeftBottom || URightBottom

觀看範例(overViewControls.html)

使用UOverlayManager管理大量地標^NEW

下面的範例會教您如何運用UOverlayManager來管理大量地標，設定最小顯示層級為6，最大顯示層級為10，當使用者切換不同層級地圖時，可避免大量的overlay物件塞到地圖中，造成地圖使用的不便，您亦可利用多個UOverlayManager來做到不同層級出現不同的地標，避免大量的overlay造成瀏覽器負擔太重。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);
var bounds = map.getBounds();
var width = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var height = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
var markerArray = new Array();
var points = new Array();
//隨機設定100個點
for (var i = 0; i < 100; i++) {
  var point = new ULatLng(bounds.getSouthWest().lat() + height * Math.random(), bounds.getSouthWest().lng() + width * Math.random());
  var marker = new UMarker(point);
  markerArray.push(marker);
  points.push(point);
}
var polyline = new UPolyline(points, '#F00', 4, 0.5);
//new 一個UOverlayManager物件，並設定最小顯示層級為6，最大顯示層級為10，當重新載入地標時alert('reloaded')
var overlayManager = new UOverlayManager(map, {
	minLevel:6,
	maxLevel:10,
	callback:function(){alert('reloaded!')}});
//將marker陣列增加至manager裡
overlayManager.add(markerArray);
//必須呼叫refresh才會將overlay放到地圖上
overlayManager.refresh();

觀看範例(UOverlayManager.html)

將圖片等DOM物件放到地圖上^NEW

下面的範例會教您如何運用UDom來放置圖片至地圖上。您亦可將FLASH、IMAGE等DOM物件放置地圖上。

var map = new UMap(document.getElementById('map'));
map.setControlType(U_FULL_CONTROL);
map.centerAndZoom(new ULatLng(25.035405, 121.520255), 8);
//新增一個div DOM物件
var dom = document.createElement('div');
dom.style.cssText = "width:164px; height:70px;border:2px solid #000;";
dom.innerHTML = "<img src='http://www.urmap.com/SearchEngine/img2/logo2.gif' />";
var centerLatlng = map.getCenter();
//宣告UDom物件，將該物件放置地圖中央
var adom = new UDom(dom, centerLatlng, new UPoint(82, 35));
//將該UDom物件放置地圖上
map.addOverlay(adom);
//測試放置第二個UDom物件
var dom = document.createElement('div');
dom.style.cssText = "width:164px; height:30px;border:2px solid #000;background-color:#FFF;";
dom.innerHTML = "這是一段測試文字！";
var adom2 = new UDom(dom, new ULatLng(25.029405, 121.520255), new UPoint(82, 15));
map.addOverlay(adom2);

觀看範例(UDom.html)

UInfoWindowOptions更豐富的訊息視窗^NEW

下面的範例會教您如何運用UInfoWindowOptions來做到更豐富的訊息視窗。

 //新增一個UInfoWindowOptions物件
 var infowindowOptions = new UInfoWindowOptions();
	infowindowOptions.width = 300;//開啟時的寬度
	infowindowOptions.height = 100;//開啟時的高度
	infowindowOptions.maxWidth = 500;//開啟最大時的寬度
	infowindowOptions.maxHeight = 400;//開啟最大時的高度
	infowindowOptions.selectedTab = 1;//開啟infoWindow時的指定分頁(從0開始)
	infowindowOptions.infoWindowTabs = [
		new UInfoWindowTab('分頁一', document.getElementById('testTabContent')), 
		new UInfoWindowTab('分頁二', document.getElementById('testTabContent2')),
		new UInfoWindowTab('分頁名稱可以很長', '這是第三個分頁的內容')];
 //當infoWindow被打開時執行的function
	infowindowOptions.onOpenFn = function(){alert('open');};
 //當infoWindow被關閉時執行的function
	infowindowOptions.onCloseFn = function(){alert('Close');};

觀看範例(UInfoWindowOptions.html)

addStaticOverlay靜態套疊物件^NEW

下面的範例會教您如何在地圖上加入一個靜態的套疊物件(例如地圖中心點)，不隨著地圖移動。

 var centerCross = document.createElement('div');
	centerCross.innerHTML = '<img src="../img/crossCenter.gif" />';
	map.addStaticOverlay(new UDom(centerCross), UCenterCenter, new UPoint(-11,-11));

觀看範例(addStaticOverlay.html)

疑難排解

如果您寫的程式無法順利運作，以下提供的一些方法可能有助於您解決問題：

使用不同的瀏覽器來觀看您的網頁
查看瀏覽器所提供的 Javascript Console 上顯示的訊息(如果有的話)
檢查是否有打錯字，切記 Javascript 是有區分大小寫的語言
到 UrMap API Blog 與其他人討論您的問題

API 概述

UMap 類別

每個 UMap 物件就代表網頁上的一幅地圖，您可以在同一個網頁中創造出多個 UMap 物件以嵌入多張地圖。當您在創造一個新的 UMap 物件時，必須指定一個網頁元件 ( 通常是用 DIV 元件 )，UrMap API 會自動依照該元件的大小將地圖嵌入其中。

UMap 類別提供了各種函式讓您可以控制地圖的中心位置、顯示比例以及新增地標，另外也可以開啟訊息視窗來顯示更多的資訊。

想知道更多有關 UMap 的用法請參考 UMap 類別說明。

訊息視窗

每個地圖都擁有一個可以用來顯示 HTML 內容的浮動訊息視窗，這個訊息視窗看起來就像是漫畫中的對話框，有一塊顯示內容的區域與一根指向地圖上特定地點的尖端部份。您無法同時在地圖上顯示一個以上的訊息視窗，但是訊息視窗的位置及內容是可以隨時改變的。

要開啟訊息視窗的方法就是呼叫 openInfoWindow 函式，並傳入一個坐標點以及一段 HTML 內容當作參數，訊息視窗會出現在該坐標點的上方並將尖端指向該點，同時在內容區顯示傳入的 HTML 內容。

UMarker 類別也同樣提供了 openInfoWindow 函式，您只需傳入 HTML 內容做為參數，這個函式會自動將訊息視窗開啟在 UMarker 物件的上方，並且依照 UMarker 所使用的圖示(UIcon)來計算訊息視窗的平移量以讓尖端部份指向該圖示建立時所指定的位置。

套疊物件(Overlays)

套疊物件是用來放置在地圖上並具有真實地理坐標的物件，當您移動地圖的時候他們也會隨之移動。

UrMap API 目前僅支援一種套疊物件：地標點(UMarker)，也就是放在地圖上的小圖示。

地標以及圖示

要建立一個自訂的 UMarker 物件需要傳入一個 ULatLng 經緯度坐標點及一個 UIcon 圖示做為參數，其中最複雜的部份就是 UIcon 圖示的建立。如果您只需要使用預設的一般圖示，那您就不用在建立 UMarker 時傳入任何 UIcon 圖示。

每個圖示都必須有一張圖片，並指定好圖片長寬，以下就是建立一個可以使用的圖示的最簡單程式碼：

var icon = new UIcon();
icon.image = 'http://www.urmap.com/SearchEngine/api/img/marker.gif';
icon.iconWidth = 16;
icon.iconHeight = 16;

UIcon 類別另外還有一些屬性可以讓您設定圖示與地標實際坐標的對齊位置，以及訊息視窗與圖示的對齊位置。詳細的用法請參考 UIcon 類別說明。

控制列

想要在地圖上使用各種控制工具列，您必須使用 addControl 函式，UrMap API 目前提供下列幾種控制列類型供您在地圖上使用：

U_FULLZOOM_CONTROL: 完整縮放控制列，包含放大縮小及每一顯示比例的按鈕，與 UrMap 網站相同
U_MINIZOOM_CONTROL: 迷你縮放控制列，只包含放大縮小按鈕
U_TYPE_CONTROL: 地圖類型控制列，可用來切換衛星影像及電子地圖
U_SCALE_CONTROL: 地圖比例尺控制列，可用來顯示地圖目前的比例尺

例如您想在地圖上使用迷你縮放控制列，您必須在初始化地圖的程式碼中加入下面這行：

map.addControl(U_MINIZOOM_CONTROL);

地圖操作模式

地圖操作模式指的是使用者在用滑鼠操作地圖時所使用的模式，您可使用 setMapAction 函式來設定您要使用的操作模式，目前共有下列幾種模式可以使用：

U_PAN_ACTION: 平移模式，為預設的操作模式，使用者可使用滑鼠拖曳地圖來改變地圖位置。
U_MEASURE_ACTION: 測距模式，在此一模式中地圖仍可拖曳移動，但每單擊一次(click)地圖即會增加一個測距點，可藉此測量任意折線段的距離。當地圖操作模式為測距模式時，呼叫 UMap.getMeasureDistance() 函式可得到目前測距折線的總長度。若要結束測距模式，可以雙擊(double click)地圖，地圖會自動回復到平移模式，並在地圖上留下最後的測距結果。
U_BOX_ACTION: 框選模式，在此一模式中，滑鼠的拖曳動作將不會移動地圖，而是在地圖上拉出一個矩形的框選範圍，當滑鼠放開結束框選動作後，系統會自動呼叫先前經由 setBoxActionCallback 函式所設定的回呼函式，告知使用者框選的範圍為何，並且將地圖回復到平移模式。
ps.使用框選模式之前，您應先使用 UMap.setBoxActionCallback() 函式來設定回呼函式，以便系統在框選模式結束時可將框選範圍傳入，否則您將無法得知使用者框選的真正範圍。

例如您想讓地圖進入測距模式，您可以隨時呼叫下面這行程式：

map.setMapAction(U_MEASURE_ACTION);

類別說明

註：參數後面如果帶有「?」表示此一參數可以忽略

UMap

每個 UMap 物件就代表網頁上的一幅地圖，詳細的說明請見前面的討論。

建構式

建構式	說明
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)等三種。
setBoxActionCallback(callbackFn)	設定框選模式結束時系統要通知的回呼函式(callback function)，此一回呼函式被呼叫時系統會帶入一個 UBounds 參數來表示使用者框選的範圍。
enableDragging()	開啟地圖可被拖曳的功能。
disableDragging()	取消地圖可被拖曳的功能。當此一函式呼叫後，地圖僅能透過程式呼叫方能改變中心位置，滑鼠將無法拖動地圖。
showControls()	顯示所有已加入的控制列。
hideControls()>	隱藏所有已加入的控制列。
getCenter()	取得目前地圖中心點的經緯度坐標(ULatLng)。
getZoomLevel()	取得目前地圖的顯示層級(integer)。
getBounds()	取得目前地圖的矩形範圍(UBounds)。
getBoundsZoomLevel(bounds)	取得能完全包含傳入的矩形範圍 bounds(UBounds) 的 zoomLevel 值。
getCurrentMapType()	取得目前使用中的地圖模式，其值可能為電子地圖(U_MAP_TYPE)、衛星影像(U_SATELLITE_TYPE)及衛星地圖(U_HYBRID_TYPE)等三種。
getMeasureDistance()	當地圖操作模式為測距模式(U_MEASURE_ACTION)時，呼叫此函式可得到目前測距折線的總長度，單位為公尺。
addOverlay(overlay)	新增一個套疊物件 overlay(UMarker) 到地圖中。
addStaticOverlay(overlay,position, point)^NEW	新增一個靜態套疊物件overlay(不隨地圖移動)到地圖中。目前overlay僅接受UDom物件。(看範例) position有五種模式： UCenterCenter(上下左右置中) ULeftTop(靠左上對齊) ULeftBottom(靠左下對齊) URightTop(靠右上對齊) URightBottom(靠右下對齊) point 為UPoint物件。例如：addStaticOverlay(new UDom(dom), ULeftTop, new UPoint(10,10));代表靠地圖左上方對齊，並靠左10px，靠上10px。
removeOverlay(overlay)	將傳入的套疊物件 overlay(UMarker) 從地圖中移除。
clearOverlays()	將地圖中所有的套疊物件移除。
openInfoWindow(latLng, html, dialogWidth?, dialogHeight?) openInfoWindow(latLng, UInfoWindowOptions?)^NEW	在地圖上的 latLng(ULatLng) 經緯度位置上開啟一個訊息視窗，視窗的內容為 html(string，內容可包含 HTML 語法)。若要控制訊息視窗的大小，可選擇性傳入 dialogWidth 與 dialogHeight 參數，代表訊息顯示區域的長寬 pixel 值，若未傳入則使用預設大小。 2.0版以後，第二個參數可以傳入UInfoWindowOptions。 2.0版以後，若不指定dialogHeight，則會依照內容決定視窗高度。
closeInfoWindow()	關閉地圖上的訊息視窗。
savePosition()	將目前地圖顯示的地點記錄起來。
returnToSavedPosition()	將地圖回復到上一次記錄的地點。
addListener(evType, listenerFn)	在地圖上註冊一個事件監聽函式(Event Listener)，負責監聽 evType(string) 類型的事件，當事件發生時，listenerFn(函式)會被呼叫。
bindListener(evType, bindObject, listenerFn)	在地圖上註冊一個事件監聽函式(Event Listener)，負責監聽 evType(string) 類型的事件，當事件發生時，bindObject(Object) 物件會去呼叫 listenerFn(函式)。
removeListener(evType, listenerFn)^NEW	將原本註冊給該地圖的某一監聽函式取消，呼叫時應傳入該監聽函式原本註冊的事件類型(evType)以及該函式本身(listenerFn)。
clearListeners(evType)^NEW	將註冊在地圖上某一類監聽事件(evType)的所有監聽函式取消掉。
transformContainerCoordinatesToLatLng(point)	將地圖視窗上的螢幕坐標 point(UPoint，map container 的左上角為 0,0)，轉換為實際的經緯度坐標(ULatLng)傳回。
transformLatLngToContainerCoordinates(latlng)^NEW	將地圖上的經緯度坐標 latlng(ULatLng)，轉換為地圖視窗上的螢幕坐標(UPoint，map container 的左上角為 0,0)傳回。
locateTo(address, callback)^NEW	將地圖定位到address(例如：台北市)，callback為function，當定位完成會呼叫此function。

可監聽事件

事件類型	回傳參數	說明
click	overlay, latlng	當滑鼠在地圖上 click 時觸發。如果 click 發生在任何一個 UMarker 物件上，則該物件會被當成第一個參數(overlay)傳給監聽函式，若未 click 到任何 UMarker 物件則 overlay 會傳入 null，另外傳給監聽函式的第二個參數(latlng)則代表 click 位置的經緯度坐標。^Modified
moveend	無	當地圖移動到一個新的位置之後觸發。
zoom	oldZoomLevel, newZoomLevel	當地圖的顯示比例層級改變後觸發，會將改變前的層級(oldZoomLevel)及改變後的層級(newZoomLevel)傳給監聽函式。
mousedown^NEW	event, latlng	當使用者在地圖上按下滑鼠左鍵時觸發，回傳的第一個參數(event)是原本的滑鼠 event 物件，第二個參數(latlng)則是滑鼠按下左鍵位置的經緯度坐標。
mouseup^NEW	event, latlng	當使用者在地圖上放掉滑鼠左鍵時觸發，回傳的第一個參數(event)是原本的滑鼠 event 物件，第二個參數(latlng)則是滑鼠放掉左鍵位置的經緯度坐標。需注意此事件要先觸發 mousedown 事件之後才可能發生。
mousemove^NEW	event, latlng	當滑鼠在地圖上移動時觸發，回傳的第一個參數(event)是原本的滑鼠 event 物件，第二個參數(latlng)則是滑鼠移動時所在位置的經緯度坐標。

UInfoWindowTab^NEW

UInfoWindowTab 是使用於UInfoWindowOptions的選項，用來建立出現在infoWindow的Tab顯示頁籤。您必須使用陣列的方式將頁籤的集合當作參數傳入UInfoWindowOptions的infoWindowTabs。

建構式

建構式	說明
UInfoWindowTab(name, content)^NEW	name 為頁籤標題，content為頁籤內容(可接受string型態或是DOM型態)。

UInfoWindowOptions^NEW

UInfoWindowOptions 使用於UMap.openInfoWindow以及UMarker的選項，您可以選擇設定這些參數來對infowWindow做更有趣的控制。

屬性

屬性	類型	說明
content^NEW	string、DOM	預設顯示的內容，可以是字串、也可以是HTML DOM。若有頁籤集合則以頁籤內容為主
width^NEW	Number	開啟infoWindow的預設寬度
height^NEW	Number	開啟infoWindow的預設高度
maxWidth^NEW	Number	當infoWindow被開到最大時的最大寬度(當此值設定之後才會出現放到最大和縮小按鈕。)
maxHeight^NEW	Number	當infoWindow被開到最大時的最大高度(當此值設定之後才會出現放到最大和縮小按鈕。)
selectedTab^NEW	Number	指定顯示的tab頁簽索引值，從0開始計算。
infoWindowTabs^NEW	Array	tab頁籤的陣列，這是一個UInfoWindowTab的集合。
onOpenFn^NEW	function	當開啟infoWindow時執行的函式
onCloseFn^NEW	function	當關閉infoWindow時執行的函式
onCloseFn^NEW	function	當關閉infoWindow時執行的函式

UOverviewMapControl^NEW

UOverviewMapControl 可以在地圖上建立一個縮略地圖。

建構式

建構式	說明
UOverviewMapControl(width, height)^NEW	建立一個UOverviewMapControl物件，建立完成之後必須透過addControl來放到地圖中。 width(int)：縮略地圖的寬度。 height(int)：縮略地圖的高度。

說明

UOverviewMapControl(width, height)^NEW

建立一個UOverviewMapControl物件，建立完成之後必須透過addControl來放到地圖中。

width(int)：縮略地圖的寬度。
height(int)：縮略地圖的高度。

屬性

屬性名稱	類型	說明
width^NEW	Number	縮略地圖的寬度。
height^NEW	Number	縮略地圖的高度。
borderColor^NEW	String	縮略地圖的邊框顏色。
borderWeight^NEW	Number	縮略地圖的邊框粗細。
boxColor^NEW	String	拖拉框的顏色。
boxBorderColor^NEW	String	拖拉框的邊框顏色。
onOpenFn^NEW	Function	縮略地圖被打開時所要執行的function。
onCloseFn^NEW	Function	縮略地圖被關閉時所要執行的function。

UOverlayManager^NEW

UOverlayManager 可以有效的管理overlay的最大顯示層級，以及最小顯示層級，並且可以以陣列的型態將大量的overlay加進此Manager。

建構式

建構式	說明
UOverlayManager(Map, opts?)^NEW	建立一個UOverlayManager物件，Map為您建立的UMap物件，即代表該overlay要加至哪一個UMap裡，opts為選擇性參數，接受物件型態。詳列如下： minLevel(int)：最小顯示層級(低於此Level則不顯示)。 maxLevel(int)：最大顯示層級(高於此Level則不顯示)。 autoMergeMarker(boolean)：自動合併周圍的地標(預設為false)。看範例 maxMergeCount(int)：被合併的地標數量最大值。(若超出最大值則僅顯示「需放大層級之訊息」)。 mergeIcon(UIcon)：被合併的圖示。

說明

UOverlayManager(Map, opts?)^NEW

建立一個UOverlayManager物件，Map為您建立的UMap物件，即代表該overlay要加至哪一個UMap裡，opts為選擇性參數，接受物件型態。詳列如下：

minLevel(int)：最小顯示層級(低於此Level則不顯示)。
maxLevel(int)：最大顯示層級(高於此Level則不顯示)。
autoMergeMarker(boolean)：自動合併周圍的地標(預設為false)。看範例
maxMergeCount(int)：被合併的地標數量最大值。(若超出最大值則僅顯示「需放大層級之訊息」)。
mergeIcon(UIcon)：被合併的圖示。

函式

函式	說明
add(overlays)^NEW	加入overlays陣列或單一overlay。
refresh()^NEW	顯示該Manager所包含的overlay。 (註：您必須呼叫此函式才會將overlay顯示出來。)
show()^NEW	顯示所有overlay。 (若您有設定顯示層級，則會依照顯示層級來顯示。)
hide()^NEW	隱藏所有overlay。
remove()^NEW	移除所有該Manager所包含的overlay。並且將所有overlay從地圖移除。
getOverlaysCount()^NEW	取得所有加入overlays的數量
getOverlayByIndex(k)^NEW	取得第k個所有加入overlays的數量

UMarker

UMarker 是可以套疊在地圖上的一種物件，會以圖示的方式顯示於地圖上的某一坐標點。

建構式

建構式	說明
UMarker(latlng, icon?, label?, desc?, zIndex?)	建立一個地標，其坐標為 latlng(ULatLng)，顯示圖示為 icon(UIcon)，若沒有傳入 icon 則會使用 API 預設的圖示。另外可選擇性傳入 label 與 desc 兩個字串參數，做為滑鼠 mouse on 該 UMarker 時所要顯示的內容，若未傳入則 mouse on 無作用。label(String) 參數用來表示該 marker 的名稱，desc(String) 參數則為 marker 的說明，兩參數均可帶有 HTML 語法。zIndex(int) 可用來設定此地標的 z-index CSS 屬性，數字越大則該地標會顯示在越上面。

說明

UMarker(latlng, icon?, label?, desc?, zIndex?)

建立一個地標，其坐標為 latlng(ULatLng)，顯示圖示為 icon(UIcon)，若沒有傳入 icon 則會使用 API 預設的圖示。另外可選擇性傳入 label 與 desc 兩個字串參數，做為滑鼠 mouse on 該 UMarker 時所要顯示的內容，若未傳入則 mouse on 無作用。label(String) 參數用來表示該 marker 的名稱，desc(String) 參數則為 marker 的說明，兩參數均可帶有 HTML 語法。zIndex(int) 可用來設定此地標的 z-index CSS 屬性，數字越大則該地標會顯示在越上面。

屬性^NEW

屬性名稱	類型	說明
zIndex^NEW	Number	該地標的z-index CSS屬性，數字越大則該地標會顯示在越上面。 (唯讀屬性，若要設置請使用setZIndex)
label^NEW	String	表示該 marker 的名稱。(唯讀屬性，若要設置請使用setMouseonInfo)
desc^NEW	String	表示該marker 的說明。(唯讀屬性，若要設置請使用setMouseonInfo)
mouseoutDelayTime^NEW	Number	滑鼠移出地標時，延遲隱藏mouseOn DIV的時間。(預設為100毫秒)
autoRangeZIndex^NEW	Bool	此值為true時，當滑鼠移過marker時會將marker的z-index調整為9999，當滑鼠移出時會將marker的z-index調整為原本的值。(預設為true)

函式

函式	說明
openInfoWindow(html, dialogWidth?, dialogHeight?) openInfoWindow(UInfoWindowOptions)^NEW	在此地標上開啟一個訊息視窗，視窗的內容為 html(string，內容可包含 HTML 語法)。若要控制訊息視窗的大小，可選擇性傳入 dialogWidth 與 dialogHeight 參數，代表訊息顯示區域的長寬 pixel 值，若未傳入則使用預設大小。 2.0版以後，參數可以傳入UInfoWindowOptions。
getPoint()	取得此地標的坐標值(ULatLng)。
setPoint(latlng)	重新設定此地標的坐標為 latlng(ULatLng)。
setIcon(icon)	重新設定此地標的顯示圖示為 icon(UIcon)，若 icon 為 null 則會使用 API 預設的圖示。
setZIndex(int)	重新該地標的z-index CSS，數字越大則該地標會顯示在越上面。
setMouseonInfo(label, desc)	重新設定此地標的 mouse on 顯示內容，若 label 為 null 則表示取消 mouse on 訊息。
addListener(evType, listenerFn)	在此地標上註冊一個事件監聽函式(Event Listener)，負責監聽 evType(string) 類型的事件，當事件發生時，listenerFn(函式)會被呼叫。
bindListener(evType, bindObject, listenerFn)	在此地標上註冊一個事件監聽函式(Event Listener)，負責監聽 evType(string) 類型的事件，當事件發生時，bindObject(Object) 物件會去呼叫 listenerFn(函式)。
removeListener(evType, listenerFn)^NEW	將原本註冊給該地標的某一監聽函式取消，呼叫時應傳入該監聽函式原本註冊的事件類型(evType)以及該函式本身(listenerFn)。
clearListeners(evType)^NEW	將註冊在地標上某一類監聽事件(evType)的所有監聽函式取消掉。
triggerEvent(evType)^NEW	觸發榜定在UMarker上的事件類型(evType)。 (看範例：marker_triggerEvent.html)
enableDragging()^NEW	將地標設為可以拖拉。(看範例：enableDraging.html)
disableDragging()^NEW	將地標設為不可拖拉。(看範例：enableDraging.html)
locateTo(address, callback)^NEW	將地圖定位到address(例如：台北市)，callback為function，當定位完成會呼叫此function。

可監聽事件

事件類型	回傳參數	說明
click	event, marker, latlng	當此地標被滑鼠 click 時觸發。
mouseover	event, marker, latlng	當此地標被滑鼠 mouse on 時觸發。
mouseout^NEW	event, marker, latlng	當此地標被滑鼠 mouse out 時觸發。
mousedown^NEW	event, marker, latlng	當此地標被滑鼠左鍵按下時觸發。
mouseup^NEW	event, marker, latlng	當此地標被滑鼠左鍵放掉時觸發。
dragging^NEW	event, marker, latlng	當此地標正在被拖拉時觸發。
dragend^NEW	event, marker, latlng	當此地標拖拉完時觸發。
contextmenu^NEW	event, marker, latlng	當出現右鍵選單時(在此地標按下滑鼠右鍵時)觸發。

UPolyline

UPolyline 是可以套疊在地圖上的一種物件，會以線段的方式顯示於地圖上。

建構式

建構式	說明
UPolyline(latlngs, color?, weight?, opacity?)	建立一個折線段物件，latlngs(ULatLng 陣列)為此線段各折點之坐標，最少要有兩點，color 為此線段之顏色(預設值為藍色)，weight 為此線段之螢幕寬度，單位為 pixel，預設值為 6 pixel 寬，opacity 則為此線段之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.5。

函式

函式	說明
getVertexCount()	取得此一折線段總共有多少折點。
getVertex(idx)	取得第 idx 個折點的坐標值(ULatLng)。
addVertex(latlng)	在此折線段的尾端加入一個坐標點 latlng(ULatLng)。
getBounds(latlng)^NEW	取得此折線段所包含的矩形範圍(UBounds)。
getDistance()^NEW	取得此折線段的總長度(公尺)。
removeVertex(k)^NEW	移除此折線段的第k個折點。

UPolygon^NEW

UPolygon 是可以套疊在地圖上的一種物件，會以任意多邊形的方式顯示於地圖上。

建構式

建構式	說明
UPolygon(latlngs, borderColor?, borderWeight?, borderOpacity?, fillColor?, fillOpacity?)	建立一個多邊形物件，latlngs(ULatLng 陣列)為此線段各折點之坐標，最少要有三點，borderColor 為此多邊形之外框顏色(預設值為紅色)，borderWeight 為外框之螢幕寬度，單位為 pixel，預設值為 2 pixel 寬，borderOpacity 則為外框之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.8。fillColor 為此多邊形之底色(預設值為黃色)，fillOpacity 則為底色之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.4。

說明

UPolygon(latlngs, borderColor?, borderWeight?, borderOpacity?, fillColor?, fillOpacity?)

建立一個多邊形物件，latlngs(ULatLng 陣列)為此線段各折點之坐標，最少要有三點，borderColor 為此多邊形之外框顏色(預設值為紅色)，borderWeight 為外框之螢幕寬度，單位為 pixel，預設值為 2 pixel 寬，borderOpacity 則為外框之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.8。fillColor 為此多邊形之底色(預設值為黃色)，fillOpacity 則為底色之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.4。

函式

函式	說明
getVertexCount()	取得此一多邊形總共有多少端點。
getVertex(idx)	取得第 idx 個端點的坐標值(ULatLng)。
addVertex(latlng)	在此多邊形的最後一個端點之後再加入一個新端點 latlng(ULatLng)。
getBounds(latlng)^NEW	取得此折線段所包含的矩形範圍(UBounds)。
getDistance()^NEW	取得此折線段的總長度(公尺)。
removeVertex(k)^NEW	移除此折線段的第k個折點。

UCircle^NEW

UCircle 是可以套疊在地圖上的一種物件，會以圓形的方式顯示於地圖上。

建構式

建構式	說明
UCircle(center, radius, borderColor, borderWeight, borderOpacity, fillColor, fillOpacity)	建立一個圓形物件，center(ULatLng)為此圓形中心點之經緯度坐標，radius 為此圓形之半徑，單位為公尺(m)，borderColor 為此圓形之外框顏色(預設值為紅色)，borderWeight 為外框之螢幕寬度，單位為 pixel，預設值為 2 pixel 寬，borderOpacity 則為外框之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.8。fillColor 為此多邊形之底色(預設值為黃色)，fillOpacity 則為底色之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.4。

說明

UCircle(center, radius, borderColor, borderWeight, borderOpacity, fillColor, fillOpacity)

建立一個圓形物件，center(ULatLng)為此圓形中心點之經緯度坐標，radius 為此圓形之半徑，單位為公尺(m)，borderColor 為此圓形之外框顏色(預設值為紅色)，borderWeight 為外框之螢幕寬度，單位為 pixel，預設值為 2 pixel 寬，borderOpacity 則為外框之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.8。fillColor 為此多邊形之底色(預設值為黃色)，fillOpacity 則為底色之透明度，可設定 0~1 之間的數值，0 表示完全透明，1 表示完全不透明，預設值為 0.4。

函式

函式	說明
getBounds()^NEW	取得此圓所包含的矩形範圍(UBounds)。

UDom^NEW

UDom 物件可以讓Dom物件套疊在地圖上。

建構式

建構式	說明
UDom(dom, latlng, anchorPoint?)^NEW	建立Dom Overlay，第一個參數即為您欲套疊在地圖上的Dom物件，顯示在latlng(ULatLng)座標點，anchorPoint(UPoint)為對應座標點，若未傳入則以(0,0)為準。

屬性

屬性	類別	說明
anchorPoint^NEW	UPoint	用來指定此Dom物件的那一點(相對於左上角)應與地圖坐標latlng對齊。例如一個 100x100 的Dom物件要以圖示中心點對齊地圖坐標，則 iconAnchor 應設為 UPoint(50, 50)。

函式

函式	說明
getPoint()^NEW	取得此DOM物件所對應的latlng(ULatLng)座標點。

UIcon

UIcon 圖示是用來表示地標要如何呈現於地圖上，在您要顯示此圖示之前，您必須先設定好 image、iconWidth、iconHeight 以及 iconAnchor 等屬性，如果您要在這個圖示上顯示訊息視窗，您也必須設定好 infoWindowAnchor 屬性才行。

建構式

建構式	說明
UIcon(copy?)	建立一個圖示，若有傳入 copy(UIcon) 參數則將 copy 圖示的所有屬性複製到此一圖示上。

屬性

屬性	類別	說明
image	string	此圖示的圖檔 URL。
iconWidth	number	此圖示的圖檔寬度(pixel)。
iconHeight	number	此圖示的圖檔高度(pixel)。
iconAnchor	UPoint	用來指定此圖示中的那一點(相對於圖示左上角)應與地圖坐標對齊。例如一個 16x16 的圖示要以圖示中心點對齊地圖坐標，則 iconAnchor 應設為 UPoint(8, 8)。
infoWindowAnchor	UPoint	用來指定此圖示中的那一點(相對於圖示左上角)應與訊息視窗的尖端對齊。

UPoint

UPoint 物件是用來表示一個螢幕坐標系統中的二維坐標，左上角為 0,0，往右及往下為正。

建構式

建構式	說明
UPoint(x, y)	建立一個二維坐標。

屬性

屬性	類別	說明
x	number	這個點的 x(水平) 坐標。
y	number	這個點的 y(垂直) 坐標。

ULatLng

ULatLng 物件是用來表示一個地理上的經緯度坐標。

建構式

建構式	說明
ULatLng(lat, lng)	建立一個經緯度坐標。lat 是緯度(latitude)，lng 是經度(longitude)。

函式

函式	說明
lat()	取得這個點的緯度值(float)。
lng()	取得這個點的經度值(float)。
moveTo(lat, lng)	將這個點的坐標改變為 lat 緯度及 lng 經度。
distanceTo(ULatLng)^NEW	傳回這個點與另一個點的距離(公尺)。

UBounds

UBounds 物件是用來表示一個經緯度的矩形範圍。

建構式

建構式	說明
UBounds(southwest?, northeast?)	建立一個經緯度的矩形範圍，西南角(左下)坐標為 southwest(ULatLng)，東北角(右上)坐標為 northeast(ULatLng)。若未傳入這兩個參數則會建立一個空的(Empty)的矩形範圍。

函式

函式	說明
getSouthWest()	取得這個矩形範圍的西南角經緯度坐標(ULatLng)。
getNorthEast()	取得這個矩形範圍的東北角經緯度坐標(ULatLng)。
getWidth()	取得這個矩形範圍的東西向涵蓋寬度，回傳值的單位為度(經度)。
getHeight()	取得這個矩形範圍的南北向涵蓋高度，回傳值的單位為度(緯度)丑C
getCenter()	取得這個矩形範圍的中心點坐標(ULatLng)。
contains(latLng)	檢查 latLng(ULatLng) 這個經緯度坐標是否包含在這個矩形範圍之內，是則傳回 true。
containsBounds(bounds)	檢查 bounds(UBounds) 是否包含在這個矩形範圍之內，是則傳回 true。
extend(latLng)^NEW	將這矩形範圍擴大到可以包含 latLng(ULatLng) 的經緯度坐標。 2.0版之後可以參數接受UBounds物件，擴大到可以包含UBound物件的範圍。
isEmpty()	檢查這個矩形範圍是否為空(不包含任何空間)，若為空則傳回 true。

在地圖上建立一個縮略地圖UOverviewMapControlNEW

使用UOverlayManager管理大量地標NEW

將圖片等DOM物件放到地圖上NEW

UInfoWindowOptions更豐富的訊息視窗NEW

addStaticOverlay靜態套疊物件NEW

地標以及圖示

建構式

函式

可監聽事件

UInfoWindowTabNEW

建構式

UInfoWindowOptionsNEW

屬性

UOverviewMapControlNEW

建構式

屬性

UOverlayManagerNEW

建構式

函式

建構式

屬性NEW

函式

可監聽事件

建構式

函式

UPolygonNEW

建構式

函式

UCircleNEW

建構式

函式

UDomNEW

建構式

屬性

函式

建構式

屬性

建構式

屬性

建構式

函式

建構式

函式

在地圖上建立一個縮略地圖UOverviewMapControl^NEW

使用UOverlayManager管理大量地標^NEW

將圖片等DOM物件放到地圖上^NEW

UInfoWindowOptions更豐富的訊息視窗^NEW

addStaticOverlay靜態套疊物件^NEW

UInfoWindowTab^NEW

UInfoWindowOptions^NEW

UOverviewMapControl^NEW

UOverlayManager^NEW

屬性^NEW

UPolygon^NEW

UCircle^NEW

UDom^NEW