如果我想讓使用者點選「板橋市」、「新店市」、「信義區」、「士林區」就會帶到該地方 並且縮放到合適的level,我該怎麼做?

Posted on 九月 22, 2008. Filed under: API問題 |

觀看範例

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


		板橋市
		新店市
		信義區
		士林區

	<div id="map"></div>

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

Javascript
// 宣告一陣列儲存矩形範圍西南角及東北角的經緯度
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&lt;total; i++) {
		if (options[i].selected) {
			return options[i].value;
		}
	}
}

function init() {
	map = new UMap(document.getElementById(&#039;map&#039;));
	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);
}

Make a Comment

Make a Comment: ( None so far )

blockquote and a tags work here.

Liked it here?
Why not try sites on the blogroll...