鄰近地址查詢與事故通報

API使用範例:鄰近地址查詢與事故通報

 

情境假設:

在圖面上單點滑鼠左鍵之後,取得交通事故之座標,選擇通報項目並填寫通報內容,完成事故通報。

 

TGOS MAP API建置方式:

 

1.     初始化地圖:
1.1 
關閉圖面上的各式控制項:
        包含地圖類型控制項、縮放控制項以及比例尺控制項,使用TGMapOptions進行設定。

                  var mapOptions = {
                          mapTypeControl: false,            //mapTypeControl(
關閉地圖類型控制項)
                          navigationControl: false,         //navigationControl(關閉縮放控制列)
                          scaleControl: false                     //scaleControl(關閉比例尺控制項)
                  };
                  pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826, 
             mapOptions);

1.2 
設定地圖起始位置:
        
使用TGOnlineMapsetZoom()」方法設定起始的地圖縮放層級;另外使用setCenter()」方法設定地圖的起始中心點坐標。

                  pMap.setZoom(7);      //指定地圖起始層級
                  pMap.setCenter(new TGOS.TGPoint(217828, 2671105));

2.     建立地圖點擊事件監聽器:
2.1 
將“click”事件加入地圖的事件監聽器中:
        
使用TGEvent.addListener()加入監聽器,事件設定在目前使用的地圖圖面上(pMap),事件設為click”。

                  TGOS.TGEvent.addListener(pMap, "click",function (e) {

2.2 
取得滑鼠點擊位置資訊:
        
首先利用函式內的point屬性,取得事件觸發時的滑鼠點擊位置坐標pt。接著透過TGOnlineMapgetZoom()」方法,取得目前的地圖層級。

                  var pt = e.point;
                  pMap.setCenter(pt);        

2.3 查詢最近之地址 

                  var addrlocate = new TGOS.TGAddress();

                  addrlocate.nearestAddress(addrpt, TGOS.TGCoordSys.EPSG3826,  //利用滑鼠點擊位置查詢最鄰近地址

                          function(result, status){

                                  var addrcon = result.formattedAddress;  //取得最鄰近地址查詢結果

                                  var addrpoint = result.geometry.location; //取得最鄰近地址xy座標

                                  document.getElementById("addr").innerHTML = addrcon;

                                  clickMarker = new TGOS.TGMarker(pMap, addrpt, '點擊位置', markerImg1, MakerOptions);

                                  addrMarker = new TGOS.TGMarker(pMap, addrpoint, '地址位置', markerImg, MakerOptions);

                          }

                   );

 

回到上方