建立標記點地圖及訊息視窗
API使用範例：加入標記點並建立訊息視窗
情境假設：
使用者可透過指定坐標的方式在TGOS地圖上建立標記點，並搭配滑鼠事件來進行訊息視窗的開關。
當使用者需要變更標記點的位置、圖示、訊息視窗內容、透明度等設定時，本篇也提供相應的程式範例，讓使用者可以輕鬆地客製化自己的標記點物件。
TGOS MAP API建置方式：
1. 初始化地圖：
首先宣告一個TEOnlineMap( )物件，在網頁上建立一個初始化地圖。
var pOMap = document.getElementById("OMap");
pMap = newTGOS.TEOnlineMap(pOMap);
2. 建立地圖標記點：
2.1 設定標記點位坐標；
接著我們開始建立初始的標記點，首先我們可以利用TEPoint( )物件先行紀錄一個坐標點位，將這個點位作為之後標記點的位置。
markerPoint = newTGOS.TEPoint(303832.533, 2767738.285);
2.2 設定標記圖示：
接著我們來設定標記點的圖示樣式，在這裡使用TEImage( )物件，TEImage( )內的第一個參數為圖示影像的URL；第二個參數為指定的圖示大小，使用TESize( )物件來建立；第三個和第四個參數分別為圖示的位移及圖示的錨點設定，皆以TEPoint( )物件來建立。
markerImg = newTGOS.TEImage("http://api.tgos.tw/
TGOSMAPAPI/images/Sample/marker.png",new TGOS.TESize(38, 33),
new TGOS.TEPoint(0, 0),new TGOS.TEPoint(10, 33));
2.3 建立標記點：
上述設定完畢之後，即可使用TEMarker( )物件來建立標記點，其中第一個參數為標記點指定疊加的地圖層；第二個參數為標記點點位；第三個參數為標記的文字提示，以字串的方式加入；第四個參數則是標記圖示設定。
pTGMarker = newTGOS.TEMarker(pMap, markerPoint,"NTU", markerImg);
3. 建立訊息視窗：
3.1 設定訊息視窗參數：
接下來我們可以在標記點的位置上新增一個訊息視窗，用來顯示該標記點的相關資訊。首先先宣告一個變數，用來紀錄訊息視窗的基本環境設定，在範例中我們使用了「maxWidth」（訊息視窗的最大寬度）、「pixelOffset」（訊息視窗位移量）以及「zIndex」（地圖疊加物件的堆疊順序）。
var InfoWindowOptions = {
maxWidth:4000, //訊息視窗的最大寬度
pixelOffset: new TGOS.TGSize(5, -30), //InfoWindow起始位置的偏移量
//使用TGSize設定
//向右X為正, 向上Y為負
zIndex:99 //視窗堆疊順序
};
3.2 建立訊息視窗：
最後使用物件「TEInfoWindow( )」來建立訊息視窗，其中第一個參數是訊息視窗的內文；第二個參數是訊息視窗放置的點位位置；第三個參數則是上一個步驟建立的相關設定。
messageBox = newTGOS.TEInfoWindow("台北市大安區羅斯福路四段一號", markerPoint, InfoWindowOptions);
3.3 加入標記點滑鼠事件監聽器：
本範例設計當滑鼠游標移至標記點上時，訊息視窗會立即顯示；反之當滑鼠游標移出標記點時，訊息視窗也會立即關閉。因此在這邊我們可以使用「TEEvent.addListener( )」針對標記點去監測標記點上的滑鼠事件，進而連動訊息視窗的開關。
首先我們根據「mouseover」（滑鼠移入）和「mouseout」（滑鼠移出）這兩種情況，分別對標記點建立兩個監聽器，並依照滑鼠事件的不同，分別指定到不同的對應函式「openInfoWindow」和「closeInfoWindow」。
TGOS.TEEvent.addListener(pTGMarker,"mouseover", openInfoWindow);
TGOS.TEEvent.addListener(pTGMarker,"mouseout", closeInfoWindow);
3.4 開關訊息視窗：
根據上一步驟所指定的兩種標記點滑鼠事件，我們可以分別建立兩個對應的函式，分別控制訊息視窗的開與關。這邊只需要呼叫TEInfoWindow物件的「open( )」和「close( )」兩個方法，就可以快速建立訊息視窗的開關事件。
function openInfoWindow() {
messageBox.open(pMap);
}
function closeInfoWindow() {
messageBox.close();
}
4. 即時修改標記點位置及訊息視窗內容：
4.1 取得修改資訊：
在範例中我們先在網頁上建立多個文字輸入框，用來紀錄使用者輸入的修改資訊。這些資訊包含了「標記點標題」、「標記點位」、「標記點圖示」、「訊息視窗內容」和「訊息視窗透明度」。
當使用者在網頁上輸入新的資訊後按下「確定修改」按鈕，第一步便是將這些資訊取出並且儲存在相關的變數內。
markerTitle = document.getElementById("title").value; //取得標題
opacity = document.getElementById("infoWindowOpacity").value; //取得透明度
markerPoint = new
TGOS.TEPoint(Number(document.getElementById("X").value),
Number(document.getElementById("Y").value)); //取得標記點位
content = document.getElementById("infoWindowContent").value;
//取得訊息文字
imgUrl = document.getElementById("iconUrl").value //取得圖示URL
4.2 更新標記點及訊息視窗內容：
將相關設定參數取出之後，我們便可以透過物件「TEMarker」和「TEInfoWindow」內建的方法來將新的設定值代入標記點和訊息視窗。在標記點的部份，我們利用TEMarker內的「setTitle( )」、「setPosition( )」和「setIcon( )」三個方法，分別設定標記點的標題、位置及圖示；訊息視窗的部份則可以利用TEInfoWindow內的「setPosition( )」、「setContent( )」和「putOpacity( )」三個方法，分別設定訊息視窗的位置、訊息內文、透明度。
pTGMarker.setTitle(markerTitle);//設定標題
if(pTGMarker){
pTGMarker.setPosition(markerPoint);//設定位置
}
markerImg = newTGOS.TEImage(imgUrl, newTGOS.TESize(38, 33),
new TGOS.TEPoint(0, 0),new TGOS.TEPoint(10, 33));
pTGMarker.setIcon(markerImg);//設定圖片
if(messageBox){
messageBox.setPosition(markerPoint);//設定訊息視窗隨標記點位置改變
messageBox.setContent(content);
messageBox.putOpacity(opacity);
}
