как да задействам събитието на картата на Google от вътрешността на наслагвания

В приложение използвам карта на 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: Функция), но тъй като поддържа само dom, а не canvas, така че когато използвах този слушател, браузърът се повреди.

Най-накрая се опитах да използвам

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

overlay google-maps-api-3
person user824624    schedule 14.03.2013    source източник

Отговори (1)


arrow_upward
3
arrow_downward

addDomListener работи за мен, дори и с <canvas/>

Това, което би нарушило кода ви, е напр. това:

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

this, когато се използва в обратно извикване на събитие, се отнася до обекта, който задейства събитието (тук: възелът на платното), вашият код произвежда рекурсия. Когато искате да задействате събитието за щракване за екземпляра StationCanvas, можете да съхраните екземпляра като свойство на елемента canvas, така че ще бъде лесно достъпен в обратното извикване при кликване

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');
    })    
  ];
person Dr.Molle    schedule 14.03.2013
comment
Благодаря, Molle, работи като чар, страхотно благодаря. така че първият слушател е за платното, докато вторият слушател е за наслагването, нали - person user824624; 14.03.2013