как вызвать событие карты Google из наложения

В приложении я использую карту Google для отображения станций с маркером Google, потому что маркер Google является статическим, а значок не анимированным, поэтому я решил унаследовать OverlayView и использовать холст для динамического рисования станции. И это работает, однако я хочу, чтобы это наложение получало события 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, как показано выше, для прослушайте событие, ничего не происходит, поэтому кажется, что холст не работает с google.maps.eventListener.

Затем я обнаружил, что Google предоставил addDomListener(instance:Object, eventName:string, handler: Function), но поскольку он поддерживает только 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, вы можете сохранить экземпляр как свойство элемента холста, чтобы он был легко доступен внутри обратного вызова щелчка.

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
Спасибо Молле, это работает как шарм, большое спасибо. так что первый прослушиватель для холста, а второй прослушиватель для наложения, справа - person user824624; 14.03.2013