取得滑鼠點擊位置坐標

API使用範例:如何在圖面上點擊滑鼠後取得坐標點位及地圖縮放層級

 

情境假設:

在圖面上單點滑鼠左鍵之後,隨即在點擊位置跳出訊息視窗。訊息內容包含點擊的位置坐標以及目前地圖的縮放層級,另外地圖會同時將地圖中心點平移至滑鼠點擊的位置。

 

TGOS MAP API建置方式:

 

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

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

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

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

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

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

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

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

        
取得上述資訊後,新增一個message變數,將取得的資訊組合成字串,留待訊息視窗使用。

                  var message = "X坐標: " + pt.x + "<br>Y坐標: " + pt.y + "<br>地圖層級: " + level;

2.3 
建立訊息視窗:
        
建立一個TEInfoWindow物件,餵入顯示訊息(message)、訊息視窗開啟位置坐標(pt)以及訊息視窗的樣式設定參數。最後在地圖上將訊息視窗打開。

                  messageBox = newTGOS.TEInfoWindow(message, pt, InfoWindowOptions);
                  messageBox.open(pMap);


        
關於訊息視窗的樣式設定,可以事先在滑鼠點擊事件發生之前就建立好。

                  var InfoWindowOptions = {
                          maxWidth: 4000,
                  pixelOffset: { x: 0, y: 0 },
                  zIndex: 0
          };

        
另外在滑鼠點擊觸發事件的最前面,可以加入一個簡單的判斷式,當滑鼠點擊時如果圖面上已經存在一個訊息視窗,則先行將該視窗關閉。

                  if (messageBox) {
                          messageBox.close(pMap);
                  }

 

回到上方