如果我想讓使用者點選「板橋市」、「新店市」、「信義區」、「士林區」就會帶到該地方 並且縮放到合適的level,我該怎麼做?
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<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);
}


