1

アプリケーションでは、Google マップを使用して Google マーカーでステーションを表示しています。これは、Google マーカーがアニメーション化されていないアイコンで静的であるためです。そのため、OverlayView を継承し、canvas を使用してステーションを動的に描画することにしました。これは機能しますが、このオーバーレイがクリック、マウスオーバー、マウスアウトなどのマーカーのようなGoogleイベントを受け取るようにしたい...

例えば、

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 では機能しないようです。

その後、Google がaddDomListener(instance:Object, eventName:string, handler:Function)を提供していることがわかりましたが、キャンバスではなく dom のみをサポートしているため、そのリスナーを使用するとブラウザが故障します。

最後に、私は使用しようとしました

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

動作するはずですが、コード内で何か問題があると思います。これでも機能しますが、次の質問は、このオーバーレイビューをGoogleマーカーのように操作できるように、イベントを外部にトリガーする方法です

    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、イベントコールバックで使用される場合、イベントをトリガーするオブジェクト（ここではcanvas-node）を参照すると、コードは再帰を生成します。StationCanvas-instanceのクリックイベントをトリガーする場合は、インスタンスをcanvas-elementのプロパティとして保存できるため、クリックコールバック内で簡単にアクセスできます。

StationCanvas.prototype.onAdd = function（）{    
    var canvas = document.createElement（ "canvas"）;
    canvas.overlay = this;
    //その他のコード
}
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 に答える