1

在一个应用程序中，我使用谷歌地图来显示带有谷歌标记的车站，因为谷歌标记是静态的，图标没有动画，所以我决定继承 OverlayView 并使用画布动态绘制车站。这很有效，但是，我希望这个叠加层能够接收像标记这样的谷歌事件，比如点击、鼠标悬停、鼠标移出......

例如，

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);
    }),     
  ];          
}

最初，我使用如上所示的google.maps.event.addListener来监听事件，没有任何反应，所以似乎画布不适用于 google.maps.eventListener。

然后我发现谷歌提供了一个addDomListener(instance:Object, eventName:string, handler:Function)，但由于它只支持 dom 而不是画布，所以当我使用那个监听器时，浏览器会崩溃。

最后，我尝试使用

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

它应该可以工作，但仍然没有，我猜代码中有问题。即使这样可行，下一个问题是如何将事件触发到外部，以便我可以像谷歌标记一样使用这个覆盖视图

    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');
    });
4

1 回答 1

3

addDomListener 对我有用，即使使用<canvas/>

什么会破坏你的代码是这样的：

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

this，当在事件回调中使用时，指的是触发事件的对象（这里：画布节点），您的代码会产生递归。当您想触发 StationCanvas-instance 的点击事件时，您可以将实例存储为 canvas-element 的属性，以便在点击回调中轻松访问

StationCanvas.prototype.onAdd = function() {    
    var canvas = document.createElement("canvas");
    canvas.overlay=这个；
    //更多代码
}
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');
    })    
  ];
于 2013-03-14T10:44:10.913 回答