互動式加入標記點工具

API使用範例:互動式加入標記點工具

 

情境假設:

客製化一個在地圖上加入標記點的工具,使用者可以使用滑鼠點擊地圖之後,直接於點擊位置加入標記,另外也可以自行設定標記點的各項參數,如圖示、大小、錨點位移......等等。

 

TGOS MAP API建置方式:

 

1.      初始化地圖:
        首先在網頁上宣告一個TEOnlineMap( )物件將地圖載入,並透過MapOptions的設定,將圖面上的各項介面控制項隱藏起來。

          var pOMap = document.getElementById("TEMap");
          var mapOptions = {
                  disableDefaultUI: true
          };
          pMap = newTGOS.TEOnlineMap(pOMap, mapOptions);

2.    加入地圖滑鼠事件監聽器:
        
本範例是經由偵測使用者在地圖上的點擊動作,之後再判斷滑鼠點擊的位置來加入標記點。因此首先我們必須在地圖上設定一個滑鼠點擊事件的監聽器,可透過指令TGOS.TEEvent.addListener( )來達成。其中的第一項參數為被監聽的對象,在這個範例中指的是我們建立的地圖底圖;第二個參數為監聽的事件,在這裡我們使用滑鼠的click事件作為被監聽的事件;最後一項參數則是滑鼠點擊事件發生後執行的函式,我們留待之後的段落再來設計要發生的動作,而函式內的tEvent參數則是監聽事件發生後的回傳內容。

          TGOS.TEEvent.addListener(pMap,"click", function (tEvent) {


3.     取得標記點參數:
3.1 
建立標記點設定參數輸入區:

        
API偵測到滑鼠點擊地圖事件發生之後,我們就可以在監聽器的執行函式內設計一個加入標記點的流程。流程的第一步我們要先取得標記點的各項參數,如圖示URL、標記點物件的大小、錨點坐標、標題等等,在範例中我們先在網頁上建立一系列的文字輸入框,讓前端的使用者可以在這些輸入框內自訂自己想要的標記點樣式。

     Marker圖示:<input type="text"id="iconUrl"value="http://api.tgos.tw/
                      TGOSMAPAPI/images/marker.png"
size="80"/><br>
          
標題:<input type="text" id="title"value="標記一" size="20"/>
          Marker
大小:<input type="text"id="SizeW" value="33" size="1"/>px * 
                     <input type="text"id="SizeH" value="33"size="1"/>px<br>
          Marker
位移:<input type="text"id="anchorX" value="16" size="1"/>px *
                     <input type="text"id="anchorY" value="33"size="1"/>px<br>
          <input type="checkbox"id="shadow"/>
是否移除陰影
          <input type="checkbox"id="draggable" />
是否可以拖曳<br>
          <input type="button" value="加入標記點" onclick="AddMarker();"/>
                     <
input type="button"value="
清除所有標記點"onclick="RmvMarker();"/>


        
其中「是否移除陰影」和「是否可以拖曳」這兩個項目都只有開(true)或關(false)兩種情況,因此設計上我們採用checkbox來讓前端使用者勾選或取消勾選即可。

3.2 
取得標記點設定參數:
        在取得上一個步驟使用者自行輸入的參數之前,我們可以先取得滑鼠點擊事件的地圖坐標點位,作為新增標記點的位置。在步驟2.時我們曾提到過監聽器內的函式帶有一個tEvent的回傳參數,透過它附帶的.point屬性我們就可以取出滑鼠點擊事件發生時的坐標位置。並新增一個TEPoint( )物件將該點位接出來。

          var pt = newTGOS.TEPoint(tEvent.point.x, tEvent.point.y);

        
接著我們使用方法document.getElementById( ),即可取出步驟3.1所建立的輸入框之內的所有標記點設定值。其中標記點物件的大小值經取出後可以立即加入物件TESize( ),另外錨點坐標取出後也可以立即加入物件TEPoint( )

          var url = document.getElementById("iconUrl").value;    //取得滑鼠游標圖示URL
          var size = newTGOS.TESize(document.getElementById("SizeW").value,
                    document.getElementById("SizeH").value);     //
取得圖示大小
          var anchor = newTGOS.TEPoint(document.getElementById("anchorX").value,
                   document.getElementById("anchorY").value); //
取得錨點位移
          var title = document.getElementById("title").value;//取得標記點標題

        
最後關於標記點的陰影及拖曳兩項屬性,可以在取得checkbox的勾選狀態之後,直接分別加入標記點設定的flatdraggable兩項屬性內。

          var markerOptions = {
                  flat:document.getElementById("shadow").checked,
                  draggable:document.getElementById("draggable").checked
          };


4.     加入標記點:
        
取得各項標記點參數之後,首先利用物件TEImage( )先行建立一個標記點圖示。物件內的參數分別加入圖示的URL位址、圖示物件的尺寸、圖示位移量及錨點位置。

          var icon = new TGOS.TEImage(url, size, new TGOS.TEEoint(0, 0), anchor);

        
之後只需要新增一個TEMarker( )物件,即可將使用者設定的標記點新增至地圖上。物件內的參數依序為疊加的底圖層、標記點位置、標記點標題、圖示設定以及標記點的設定選項。

          var marker = newTGOS.TEMarker(pMap, pt, title, icon, markerOptions);

5.     移除所有標記點:
        
在建立標記點之前,實際上我們事先已經宣告了一個空的陣列,準備用來儲存所有新增的標記點。

     var Markers = new Array();

        
在這之後每新增一個標記點,我們就會將新增的標記點存進這個陣列裡面。

          Markers.push(marker);

        
接著設計一個函式,函式內使用迴圈取出陣列內所有的TEMarker( )物件,然後利用物件內的setMap(null)方法將標記點物件移除。每當有移除標記點的需求時,便呼叫這個函式來進行刪除標記點。

          function RmvMarker() {
                  for (i=0; i < Markers.length; i++) {
                          Markers[i].setMap(null);
                  }               
                  Markers = [];
          }

 

 

回到上方