複合式定位
API使用範例：複合式定位
情境假設：
使用者可藉由TGLocate()功能，輸入地名關鍵字方式進行搜尋並定位，或是進一步指定某一縣市及鄉鎮來縮小搜尋範圍，使定位功能更便利化。複合式定位功能查詢邏輯是藉由字串判別、坐標格式判別以及地址關鍵字判別，進行不同類型之定位。定位結果包含定位點坐標、查詢結果字串、定位類型、所在行政區(坐標定位無)、地址組成(僅限地指定位)、定位結果總數、定位結果頁數等資訊，供使用者進行利用。另外也可以指定查詢中心，讓定位結果依據與中心之距離進行排序。
TGOS MAP API建置方式：
1. 初始化地圖：
首先宣告一個TGOnlineMap( )物件，在網頁上建立一個地圖，並選擇座標系統。
function main() {
mapDiv = document.getElementById("TGMap");
map = new TGOS.TGOnlineMap(mapDiv, coordSys);
var coordSys = TGOS.TGCoordSys.EPSG3857;
tgLocate = new TGOS.TGLocate();
info = new TGOS.TGInfoWindow();
}
2. 建立控制欄位：
建立一個控制欄位，以便進行複合式定位的關鍵字輸入與範圍等條件查詢。
.panel
{
position: absolute;
left: 0px;
top: 0px;
margin: 16px;
margin-left: 64px;
background-color: snow;
padding: 5px;
border: 1px solid #000000;
box-shadow: 2px 2px 4px #606060;
}
html, body, #TGMap
{
width: 100%;
height: 100%;
margin: 0;
}
2. 複合式定位
2.1 複合式定位功能設定
使用者可依查詢需求輸入關鍵字，系統將依輸入內容進行搜尋並定位，找出符合關鍵字內容之地點。
//complexLocate
function locate() {
//取得X 及 Y
var cx = parseFloat(document.querySelector("#centerX").value);
var cy = parseFloat(document.querySelector("#centerY").value);
//設定中心點坐標
var center = new TGOS.TGPoint(cx, cy);
//TGLocate 定位請求的設定
var request = {
geometryInfo: document.querySelector("#geometryInfo").checked,
requestText: document.querySelector("#requestText").value,
pageNumber: parseInt(document.querySelector("#page-number").value),
county: document.querySelector("#county").value,
town: document.querySelector("#town").value
}
//判斷取得的X & Y 是否有數值
if (!isNaN(cx) && !isNaN(cy)) {
var center = new TGOS.TGPoint(cx, cy);
//設定查詢所在位置，若此屬性有設定則回傳結果會依照與查詢位置的距離排序。
request.center = center;
}
//綜合定位要求
tgLocate.complexLocate(request, coordSys,function (results, status) {
console.log(arguments);
if (status !== TGOS.TGLocatorStatus.OK && status !==
TGOS.TGLocatorStatus.TOO_MANY_RESULTS) {
alert(status);
return;
}
//markers 陣列中存在 marker 先於圖台中清除，後將 markers 陣列清空
if (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
//確定 markers 陣列清空後，設定新取得的 Marker 到 Markers 陣列中
for (var i = 0; i < results.length; i++) {
var re = results[i];
if (re.geometry) {
var marker = newTGOS.TGMarker(map, re.geometry.location);
//設定Marker的Title
marker.setTitle(re.name);
//設定標記點註解
marker.annotation = re;
//設定Marker點擊事件
TGOS.TGEvent.addListener(marker,"click", function (e) {
//設定InfoWindow內容
info.setContent(this.annotation.county + this.annotation.town + this.annotation.name + " [" + this.annotation.type + "]");
info.setPosition(this.position);
info.open(map);
})
markers.push(marker);
}
}
});
}
2.2 圖標顯示資訊
系統將根據查詢的結果，將圖標放置於圖台上，點擊該圖標即可顯示該位置之資訊如所在縣市、鄉鎮及其位置之詳細名稱。
//Marker InfoWindow 範例
functionbindMarkerInfoWindow(markers) {
markers.forEach(function (marker) {
//加入Marker Click事件
TGOS.TGEvent.addListener(marker, "click",function (e) {
//設定IndoWindow 內容
info.setContent(this.annotation.county + this.annotation.town +
this.annotation.name);
info.setPosition(this.position);
info.open(map);
})
});
}
3. 設定查詢中心點
透過查詢中心點功能，使用者先於控制欄位點選查詢中心點，再點選地圖上任意位置即可獲得該位置之XY座標，並以該中心點為起點，將搜尋結果離中心點由近至遠排列並回覆給使用者。
// Set ordering center
function addCenter() {
//設定一次性點擊事件
TGOS.TGEvent.addListenerOnce(map,"click", function (e) {
//取得點擊圖面座標位置
document.querySelector("#centerX").value = e.point.x;
document.querySelector("#centerY").value = e.point.y;
})
}
