互動式加入標記點工具

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的勾選狀態之後，直接分別加入標記點設定的「flat」和「draggable」兩項屬性內。

          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 = [];
          }