建立標記點地圖及訊息視窗

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(滑鼠移出)這兩種情況,分別對標記點建立兩個監聽器,並依照滑鼠事件的不同,分別指定到不同的對應函式openInfoWindowcloseInfoWindow

                  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 
更新標記點及訊息視窗內容:
        
將相關設定參數取出之後,我們便可以透過物件TEMarkerTEInfoWindow內建的方法來將新的設定值代入標記點和訊息視窗。在標記點的部份,我們利用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);
                  }

 

 

回到上方