圖片影像疊加層滑鼠事件

圖片影像疊加層滑鼠事件

此API可將圖片影像疊加層加入監聽事件，當針對圖片影像疊加層執行點擊、按下、放開、移入、移出、雙點擊、點擊右鍵時，將觸發一系列的滑鼠事件。值得注意的是，本API範例中，監聽所有的event，觸發事件有可能被啟動的其他監聽事件蓋過，如果同時監聽點擊、按下與放開標記點，使用滑鼠放開圖片影像疊加層將會被前兩項事件蓋過，如果同時按下右鍵並放開，則放開圖片影像疊加層事件則可運作。但是單獨監聽時則無此問題。

msg = document.getElementById("msg");

GOverlay = new TGOS.TGGroundOverlay();  //新增一個TGGroundOverlay物件

var image = new TGOS.TGImage();  //新增一個TGImage物件, 準備將此影像疊加

var url ='http://api.tgos.tw/TGOS_API/images/taipeichungshan.png';  //設定影像來源位址

image.setUrl(url);

GOverlay.setImage(image);

GOverlay.setBounds(newTGOS.TGEnvelope(302025.629,2777379.652,307798.743,2769564.386));

//以TGEnvelope物件定義套疊影像的範圍

GOverlay.setMap(pMap);  //設定要套疊影像的地圖

GOverlay.setZIndex(20);

TGOS.TGEvent.addListener(GOverlay, 'click', function(){msg.innerHTML += 'click' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'dblclick', function(){msg.innerHTML += 'dblclick' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'rightclick', function(){msg.innerHTML += 'rightclick' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'mousemove', function(){msg.innerHTML += 'mousemove' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'mousedown', function(){msg.innerHTML += 'mousedown' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'mouseup', function(){msg.innerHTML += 'mouseup' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'mouseover', function(){msg.innerHTML += 'mouseover' + '<br>';});

TGOS.TGEvent.addListener(GOverlay, 'mouseout', function(){msg.innerHTML += 'mouseout' + '<br>';});

圖片影像疊加層滑鼠事件共有：

滑鼠點擊觸發事件(click)

按下滑鼠按鍵觸發事件(mousedown)

放開滑鼠按鍵觸發事件(mouseup)

滑鼠移至圖片影像上觸發事件(mouseover)

滑鼠移動離開圖片影像觸發事件(mouseout)

滑鼠於圖片影像上移動時連續觸發(mousemove)

滑鼠雙擊圖片影像觸發事件(dbclick)

滑鼠點擊右鍵觸發事件(rightclick)