UrMap API Blog

1. 地圖綁上MouseDown事件, 每次點擊地圖後會回傳event及latlng兩個參數
2. 再透過lat()及lng()兩個函式分別取得緯度及經度

function init() {
	var map = new UMap(document.getElementById('map'));
	map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);
	// 地圖綁上MouseDown事件, 每次點擊地圖回傳Event及latlng兩個參數
	map.addListener('mousedown', function(e, latlng){
		var inputs = document.getElementsByTagName('INPUT');
		inputs[0].value = latlng.lat(); // 取得的緯度值丟入第一個input text
		inputs[1].value = latlng.lng(); // 取得的經度值丟入第二個input text
	});
}

觀看範例

有時候有些網頁不需要在一開始就載入urmap api，有可能是使用者觸發某個動作才要顯示地圖，這時候用原本取得API的方式(document.write)就無法作到include on demand，因此我寫了一個小程式，經過壓縮之後只有1.6kb。接下來你只要呼叫 Read more…

enableDraging 讓地標設為可拖拉，透過增加監聽函式addListener 榜定dragging 與 dragend事件，可以進階控制UMarker被拖動時的動作。

        function createMarker(point) {
          var marker = new UMarker(point, myIcon);
          marker.addListener('dragging', function(e, mkr, latlng) {
            //marker.openInfoWindow('Hello!');
            document.getElementById('log').innerHTML = '正在拖拉：'+latlng.toUrlString();
          });
          marker.addListener('dragend', function(e, mkr, latlng) {
            //marker.openInfoWindow('Hello!');
            document.getElementById('log').innerHTML = '拖拉結束：'+latlng.toUrlString();
          });
          return marker;
        }

        marker = createMarker(map.getCenter());
        map.addOverlay(marker);
        marker.enableDragging();

觀看範例: http://www.urmap.com/SearchEngine/api/documentation/enableDraging.html

triggerEvent可以讓你直接觸發marker上自定義的監聽事件，通常會做一個地標列表列出所有的marker，當點選列表時觸發原本榜定在marker上的事件。

        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);
          marker.setMouseonInfo('label:'+number, 'desc:'+number);
          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);

          var a = document.createElement('a');
          a.href='#';
          a.innerHTML = marker.label;
          a.onclick = (function(m){
          	return function(){
          		m.triggerEvent('click');
          	};
          })(marker);
          document.getElementById('list').appendChild(a);
          document.getElementById('list').appendChild(document.createTextNode('　'));

觀看範例: http://www.urmap.com/SearchEngine/api/documentation/marker_triggerEvent.html

CSS

/** MouseOnDiv 區塊 **/
.UMarkerMouseOnDiv{
	position: absolute;
	top:0px;
	width:120px;
	z-index:1;
	font:12px tahoma;
	display:none;
	overflow:hidden;
	opacity:0.8;
	filter:alpha(opacity:80);
	border: 1px solid #0099FF;
}
/** MouseOnDiv 標題 **/
.UMarkerMouseOnDivName{
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(UMarkerTop.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-color: #0f69fe;
	border: 1px solid #FFFFFF;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 3px;
}
/** MouseOnDiv 內容 **/
.UMarkerMouseOnDivDesc{
	padding:1px 10px;
	background-color:#FFFFFF;
}

URMAP API 2.0版大幅更新及改善了許多功能，並且相容於前一版。

為了提供更快速、可靠的API服務，取得API的網址由原本的http://www.urmap.com/SearchEngine/api/getapi.jsp 改成 http://api.urmap.com/js/getapi.php， 原本的API路徑雖然還會繼續服務，但是不再提供更新，若要取得最新的API請將網址改為新的API路徑。建議不管您是否想更換新的API，都要將路徑改為新的API路徑，以取得更快速更可靠的服務。（URMAP API 2.0 Document）

雖經過一連串的測試，但難免可能會有疏漏，若有bug請留言或寄信至bingo.yan@olemap.com，更新簡介如下：

1. 出圖速度更快，減少等待時間。
2. 增進UMarker的效能，簡化UMarker物件。
3. UMarker可以拖拉(enableDragging)和取消拖拉(disableDragging)。
4. 增加UMarker的可監聽事件(mouseout, mousedown, mouseup, contextmenu, dragend, draging)。
5. 新增UDom overlay，你可以透過UDom將任何DOM物件(包括Flash)插到指定的經緯度上面(看範例)。
6. 許多人一直期望有的UOverviewControl控制項，能夠在地圖上放入縮略地圖控制項。(看範例)
7. UInfoWindowOptions 更豐富的訊息視窗，且可以設定分頁內容，infoWindow不再只有單調的內容。(看範例)
8. addStaticOverlay 可以在地圖上加入一個靜態的套疊物件(不隨地圖移動)。(看範例)
9. 使用UOverlayManager來管理大量地標，透過該物件來管理地標，可以有效的控制在地圖上顯示的地標，例如可以設定最大和最小顯示層級，拖動地圖和縮放地圖時會判斷地標是否在可是範圍之內，若沒有則不顯示，避免過多的地標造成頁面loading過重。另外當開啟autoMergeMarker功能時，會將鄰近的地標合併，避免過多的地標重疊。(看範例)
10. ULatLng 可直接計算與另外一個ULatLng的距離。
11. 相容於Google Chrome。

更多的範例請參考UrMap API BLOG。

觀看範例

CSS

#map {
	width: 500px;
	height: 400px;
	border: 1px solid black;
}
select.select-field {
	font-size: 12px;
	color: #333;
	border: 1px solid #333;
	margin: 0px 0px 10px 0px;
	padding: 2px;
}

HTML

<body onload="init();">
	<select class="select-field" onchange="loadMap();">
		<option value="0" selected>板橋市</option>
		<option value="1">新店市</option>
		<option value="2">信義區</option>
		<option value="3">士林區</option>
	</select>
	<div id="map"></div>
</body>

查詢某個地點的經緯度
按下滑鼠右鍵，出現右鍵選單，選擇查詢經緯度，拷貝經緯度，如下圖。

// 宣告一陣列儲存矩形範圍西南角及東北角的經緯度
var locations = [{SWLat:24.955531122809986,SWLng:121.35407679576154,
				NELat:25.066144696138256,NELng:121.55485406951051},
				{SWLat:24.88251262907,SWLng:121.434947311581,
				NELat:24.9921441648787,NELng:121.6375724412087},
				{SWLat:24.978025822536974,SWLng:121.47252509421136,
				NELat:25.087885910040874,NELng:121.67629414994528},
				{SWLat:25.08071599866579,SWLng:121.42961783656162,
				NELat:25.189774015918026,NELng:121.63129496303368}];
var map;

function getSelectedIndex() {
	var options = document.getElementsByTagName('option');
	var total = options.length;
	for (var i=0; i<total; i++) {
		if (options[i].selected) {
			return options[i].value;
		}
	}
}

function init() {
	map = new UMap(document.getElementById('map'));
	loadMap();
}

function loadMap() {
	var selectedIndex = getSelectedIndex();
	// 建立一個經緯度的矩形範圍
	var bounds = new UBounds(new ULatLng(locations[selectedIndex].SWLat, locations[selectedIndex].SWLng),
				new ULatLng(locations[selectedIndex].NELat, locations[selectedIndex].NELng));
	// 取得這個矩形範圍的中心點坐標(經緯度)
	var centerLatLng = bounds.getCenter();
	// 取得能完全包含傳入的矩形範圍的zoomLevel 值
	var zoomLevel = map.getBoundsZoomLevel(bounds) + 2;
	// 將地圖的中心點移動至指定的經緯度坐標並縮放到指定的zoomLevel
	map.centerAndZoom(new ULatLng(centerLatLng.lat(), centerLatLng.lng()), zoomLevel);
}

觀看範例

CSS

#map {
	width: 500px;
	height: 400px;
	border: 1px solid black;
}
ul#context-menu {
	font-size: 12px;
	list-style: none;
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
	display: none;
	margin: 0px;
	position: absolute;
}
ul#context-menu li.tab {
	width: 80px;
	background-color: #ccc;
	color: #333;
	text-align: center;
	line-height: 1.6;
	border-bottom: 1px solid #333;
	margin: 0px 0px 0px -40px;
	#margin: 0px;
	display: block;
	cursor: pointer;
}
ul#context-menu li.tab:hover {
	background-color: #333;
	color: #fff;
}

HTML

<body onload="loadMap();">
    <div id="map"></div>
    <ul id="context-menu">
        <li class="tab" onclick="addMarker();">Add Marker</li>
        <li class="tab" onclick="closeContextMenu();">Close</li>
    </ul>
</body>

產生地圖及bind a contextmenu event into the map

var map;
var MouseObj = {};
// 自訂 the icon of the marker
var icon = new UIcon();
icon.image = 'http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png';
icon.iconWidth = 49;
icon.iconHeight = 52;
icon.iconAnchor = new UPoint(32, 32);

function loadMap() {
	var mapDiv = document.getElementById('map');
	map = new UMap(mapDiv);
	var centerLatLng = new ULatLng(25.035405, 121.520255);
	map.centerAndZoom(centerLatLng, 8);
	// Bind a contextmenu event into the div map to show the context menu.
	addEvent(mapDiv, 'contextmenu', showContextMenu);
}

function addEvent(obj, event, fn) {
	if (obj.addEventListener) { // For Firefox, Opera, Safari
		obj.addEventListener(event, fn, false);
	} else if (obj.attachEvent) { // For IE
		obj.attachEvent('on'+event, fn);
	}
}

自訂右鍵選單及設定選單位置

/********************
隱藏預設的右鍵選單
********************/
function cancelDefault(e) {
	// For IE
	if(window.event)
		window.event.returnValue = false;
	// For Firefox
	if(e && e.preventDefault)
		e.preventDefault();
}

/*********
選單位置
*********/
function getMousePos(e) {
	if (e.pageX || e.pageY){ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
		MouseObj.x = e.pageX ;
		MouseObj.y = e.pageY;
	} else if (e.clientX || e.clientY){
		MouseObj.x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		MouseObj.y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
}

/*********
右鍵選單
*********/
function showContextMenu(e) {
	var ev = e || window.event;
	cancelDefault(ev);
	getMousePos(ev);
	var contextMenu = document.getElementById('context-menu');
	contextMenu.style.display = 'block';
	contextMenu.style.left = MouseObj.x + 'px';
	contextMenu.style.top = MouseObj.y + 'px';
}

選單按紐

/*********
新增Marker
*********/
function addMarker() {
	var latlngObj = map.transformContainerCoordinatesToLatLng(new UPoint(MouseObj.x, MouseObj.y));
	var marker = new UMarker(new ULatLng(latlngObj.lat(), latlngObj.lng()), icon);
	map.addOverlay(marker);
	closeContextMenu();
}

/*********
關閉選單
*********/
function closeContextMenu() {
	var contextMenu = document.getElementById('context-menu');
	contextMenu.style.display = 'none';
}

A：請自己綁定mouseover事件，利用UMarker.getPoint()來取得經緯度座標，並設定marker info的位置。

點我觀看範例

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

	var marker = new UMarker(map.getCenter());
	bindMaukerMouseover(marker, 'this is a string!');
	map.addOverlay(marker);

	var marker2 = new UMarker(new ULatLng(25.033405, 121.523255));
	bindMaukerMouseover(marker2, 'this is another string!');
	map.addOverlay(marker2);

	//My marker info Div
	var myMarkerInfoDiv = document.createElement('div');
	myMarkerInfoDiv.id = 'myMarkerInfoDiv';
	myMarkerInfoDiv.style.cssText = 'width:200px;border:1px solid blue;display:none;position:absolute;background-color:#CCC;';
	document.getElementById('map').appendChild(myMarkerInfoDiv);

}

榜定marker的mouseover事件

function bindMaukerMouseover(mkr, msg){
	mkr.addListener('mouseover', function(){
		var latlng = mkr.getPoint();//取得該座標的經緯度
		var point = map.transformLatLngToContainerCoordinates(latlng);//將經緯度轉成螢幕座標（相對於mapDiv左上角）
		var exX = 15;//x偏差量
		var exY = 10;//y偏差量
		document.getElementById('myMarkerInfoDiv').style.left = (point.x + exX) + 'px';
		document.getElementById('myMarkerInfoDiv').style.top = (point.y + exY) + 'px';
		document.getElementById('myMarkerInfoDiv').style.display = 'block';
		document.getElementById('myMarkerInfoDiv').innerHTML = msg;
	});
	mkr.addListener('mouseout', function(){
		document.getElementById('myMarkerInfoDiv').style.display = 'none';
	});
}

1.09 版 API 的新功能如下：

1. 改善 IE7 使用衛星地圖時的效能
2. 解決 IE 中無法列印 UPolyline 的 bug
3. 解決地圖列印時，zoombar 會留白的 bug
4. 調整地圖框選模式(U_BOX_ACTION)，當框選完畢時框框不會直接消失，要等使用者 click 地圖或移動地圖之後才會消失
5. UMap 類別新增 mousedown、mouseup、mousemove 等監聽事件的支援
6. UMap 類別新增 transformLatLngToContainerCoordinates 函式，可將地圖坐標轉換為螢幕坐標
7. UMarker 類別新增 mousedown、mouseup 等監聽事件的支援
8. UMap 及 UMarker 類別新增 removeListener、clearListeners 兩種取消註冊監聽函式的新函式
9. 新增 UPolygon 多邊形類別支援，可於地圖上套疊任意多邊形物件
   
10. 新增 UCircle 圓形類別支援，可於地圖上套疊圓形物件
    

以上新增功能的詳情請參考API 說明文件