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>
查詢某個地點的經緯度
按下滑鼠右鍵，出現右鍵選單，選擇查詢經緯度，拷貝經緯度，如下圖。
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);
}