如何在overlayview中觸發google map事件

Question

在一個應用程序中，我使用google map來顯示帶有google標記的站點，因爲google標記是靜態的，圖標沒有動畫，所以我決定繼承OverlayView並使用canvas動態繪製臺站。這一點也適用，但是，我希望這個覆蓋接收谷歌事件，如標記，如點擊，鼠標，鼠標移出...

例如，

function StationCanvas(map, position, name) { 
    this.map_ = map; 
    this.position_ = position; 
    this.name_ = name; 
    this.canvas_ = null; 
    this.labelDiv_ = null; 
    this.canvasWidth_ = 12; 
    this.canvasHeight_ = 50; 
    this.setMap(map); 

    console.log('canvas     '+this.position_); 
} 

StationCanvas.prototype = new google.maps.OverlayView(); 
StationCanvas.prototype.onAdd = function() {  
    var canvas = document.createElement("canvas"); 
    canvas.setAttribute("width", this.canvasWidth_); 
    canvas.setAttribute("height", this.canvasHeight_); 
    canvas.style.position = "absolute";  

    this.canvas_ = canvas; 
    var panes = this.getPanes(); 
    panes.floatPane.appendChild(canvas); 
    this.labelDiv_ = document.createElement("div"); 
    this.labelDiv_ .setAttribute("width", this.canvasWidth_); 
    this.labelDiv_ .setAttribute("height", this.canvasHeight_); 
    this.labelDiv_ .style.position = "absolute";    
    this.labelDiv_ .innerHTML = this.name_; 
    panes.floatPane.appendChild(this.labelDiv_); 
    ///////////////////////////////////////////////////////////// 

    this.listeners_ = [ 
    google.maps.event.addListener(this.canvas_, "mouseover", function (e) { 

     //this.style.cursor = "pointer"; 
     //google.maps.event.trigger(this, "mouseover", e); 
     console.log('mouse mover'); 
    }), 
    google.maps.event.addListener(this.canvas_, "mouseout", function (e) { 

     //this.style.cursor = this.getCursor(); 
     //google.maps.event.trigger(this, "mouseout", e); 
     console.log('mouse out'); 
    }), 

    google.maps.event.addListener(this.canvas_, "click", function (e) { 
     google.maps.event.trigger(this, "click", e); 
     console.log('click');   
    }), 
    google.maps.event.addListener(this.canvas_, "dblclick", function (e) { 
     //google.maps.event.trigger(this, "dblclick", e); 
    }),  
    ];   
} 

Intially，我用google.maps.event.addListener如上面顯示的監聽事件一樣，沒有任何反應，所以看起來畫布不適用於google.maps.eventListener。

然後我發現谷歌已經提供了一個addDomListener(instance:Object, eventName:string, handler:Function)，但因爲它只支持dom而不是canvas，所以當我使用該監聽器時，瀏覽器崩潰了。

最後，我曾嘗試使用

canvas.onmouseout = function() { 
    console.log("on mouse out"); 
    } 
} 

它應該工作，但仍然沒有，我想的東西在代碼中的錯誤。即使是這樣的作品，接下來的問題是我怎麼可以觸發事件外，這樣我就可以工作，這個OverlayView的像谷歌的標誌

var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13); 
    google.maps.event.addListener(test1, 'click', function(event){ 
     console.log('test 1 click'); 
    }); 

Answer 1

addDomListener工作對我來說，即使<canvas/>

什麼會打破你的代碼是例如這樣的：

google.maps.event.addListener(this.canvas_, "click", function (e) { 
     google.maps.event.trigger(this, "click", e); 
     console.log('click');   
    }) 

this，在事件回調使用時，指的是觸發事件的對象（這裏：畫布節點），你的代碼產生遞歸。當你想要觸發點擊事件的StationCanvas實例，您可以實例存儲作爲畫布元素的屬性，所以這將是很容易訪問的點擊回調

StationCanvas.prototype.onAdd = function() {  
    var canvas = document.createElement("canvas"); 
    canvas.overlay=this; 
    //more code 
}

---

this.listeners_ = [ 
    google.maps.event.addDomListener(this.canvas_, "click", function (e) { 
     google.maps.event.trigger(this.overlay,'click') 
    }), 
    google.maps.event.addListener(this, "click", function (e) { 
     alert('click on the StationCanvas-instance'); 
    })  
    ];  

內