Question

在应用程序中，我使用谷歌地图显示带有谷歌标记的电台，因为谷歌标记是静态的，图标没有动画，所以我决定继承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来监听事件，没有任何反应，因此看起来canvas不适用于google.maps.eventListener。

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

最后，我尝试使用

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

它应该可以工作，但仍然没有，我猜在代码中有问题。即使这样有效，下一个问题是如何将事件触发到外部，以便我可以像google marker一样使用此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，当在事件回调中使用时，指的是触发事件的对象（此处：canvas-node），您的代码会产生递归。如果要触发StationCanvas实例的click事件，可以将实例存储为canvas-element的属性，以便在click-callback中轻松访问

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

如何从overlayview中触发google地图事件

1 个答案: