地址定位與查詢週邊地標
API使用範例：地址定位與查詢週邊地標
情境假設：
這個範例結合了地址定位以及環域查詢兩項不同的服務，讓使用者藉由地址定位功能先取得一個位置點，再以這個位置點作為環域中心來針對特定地標進行查詢。正常使用環域查詢時，使用者必須輸入一個中心點坐標來進行後續的查詢動作，不過一般的使用者往往無法得知欲查詢的精確坐標點位，這個時候就可以藉由地址定位的方式來設定環域的中心點。
此範例示範查詢的地標為「警察」、「消防單位」、「避難收容所」三種地標，，使用者利用一個自行輸入的地址及自訂環域範圍後，即可查到該地址一定範圍內的所有消防單位位置及其相關資訊。
TGOS MAP API建置方式：
1. 宣告TGOnlineMap地圖物件並設定坐標系統
function InitWnd() {
var pOMap = document.getElementById("TGMap");
pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826); //宣告TGOnlineMap地圖物件並設定坐標系統
pMap.setZoom(9); //指定地圖起始層級
pMap.setCenter(new TGOS.TGPoint(304855.757, 2771652.887)); //指定地圖起始中心點坐標
}
2. 利用TGOS.TGAddress()物件，滑鼠點擊位置查詢最鄰近地址，取得最鄰近地址查詢結果
function getClickaddrloc()
{
TGOS.TGEvent.addListener(pMap, "click", function (e) { //加入滑鼠單擊地圖事件監聽器
clearAll();
var pt = e.point; //取得滑鼠點擊位置坐標
var px = pt.x;
var py = pt.y;
var addrpt = new TGOS.TGPoint(px, py); //將滑鼠點擊位置轉為TGOS Point點資料
addrlocate.nearestAddress(addrpt, TGOS.TGCoordSys.EPSG3826, //利用滑鼠點擊位置查詢最鄰近地址
function(result, status){
addrcon = result.formattedAddress; //取得最鄰近地址查詢結果
addrpoint = result.geometry.location;
document.getElementById("addr").value = addrcon;
LocMarker = new TGOS.TGMarker(pMap, addrpoint, addrcon); //繪出地址定位點
}
);
});
}
3. 取得文字輸入框內的地址 使用address進行地址定位
function getTextaddrloc()
{
clearAll();
//------------------地址定位---------------------
var Add = document.getElementById('addr').value; //取得文字輸入框內的地址
var LService = new TGOS.TGLocateService(); //宣告一個新的定位服務
var request = { //設定定位所需的參數, 使用address進行地址定位
address: Add
};
LService.locateTWD97(request, function(result, status){ //進行定位查詢, 並指定回傳資訊為TWD97坐標系統
if (status != 'OK') { //確認該查詢地址是否可以查詢成功
alert(status); //若該地址無法進行查詢則顯示錯誤狀態碼
return;
}
else {
addrpoint = result[0].geometry.location; //利用geometry.location取得地址點位(TGPoint)
LocMarker = new TGOS.TGMarker(pMap, addrpoint, addrcon); //繪出地址定位點
pMap.setCenter(addrpoint); //指定地圖起始中心點坐標
}
});
}
4. 設定點環域查詢條件, 包含圓心(loc)及半徑(radius)，進行環域查詢
function getBuffer(pt)
{
if (BufferArea) //假設地圖上已存在環域圖形(TGFill), 則先行移除
{
BufferArea.setMap(null);
BufferArea = null;
}
//-------------------環域查詢-------------------
//var radius = parseFloat(r); //取得使用者輸入的環域半徑
var queryRequst = { //設定點環域查詢條件, 包含圓心(loc)及半徑(radius)
position: pt,
distance: radius
};
//----------------繪製環域圖形-------------------
var circle = new TGOS.TGCircle(); //建立一個圓形物件(TGCircle)
circle.setCenter(pt); //以滑鼠點擊位置為圓心
circle.setRadius(radius); //設定半徑
var pgnOption = { //設定圖形樣式
fillColor: "#ffff00",
fillOpacity : 0.3,
strokeWeight : 3,
strokeColor : "#ee0000"
};
BufferArea = new TGOS.TGFill(pMap, circle, pgnOption); //使用TGFill物件將圓形繪製出來
pMap.fitBounds(BufferArea.getBounds()); //取得環域圖形的邊界後, 調整地圖顯示的範圍
}
