web-dev-qa-db-ja.com

カスタムオーバーレイをクリック可能にする（Google Maps API v3）

google.maps.OverlayViewから継承するカスタムオーバーレイクラス（ImageOverlay）があります。 Googleマップのクリックイベント（DOMクリックイベントだけでなく）に応答したいのですが、addListenerを使用するだけではうまくいきません。

例えばshapes配列があり、google.maps.PolygonオブジェクトとImageOverlayオブジェクトの混合が含まれています。

for (var i in shapes) {
  google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')});
}

ポリゴンをクリックするとアラートがトリガーされますが、カスタムオーバーレイをクリックしても何も起こりません。

Google Maps APIでオーバーレイをクリック可能として処理するにはどうすればよいですか。

overlaygoogle-maps-api-3
30
Tamlyn

V3の更新：overlayLayerはマウスイベントを受け付けなくなりました。代わりにoverlayMouseTargetにオーバーレイを追加し、リスナーを追加してください。そうすれば、通常、マウスイベントを受け取るはずです。

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div);

// set this as locally scoped var so event does not get confused
var me = this;

// Add a listener - we'll accept clicks anywhere on this div, but you may want
// to validate the click i.e. verify it occurred in some portion of your overlay.
google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(me, 'click');
});

参照： http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

62
Tim

Maps APIは、オーバーレイのどの部分をクリック可能にするかを自動的に決定できません（つまり、透明な背景で画像をレンダリングする場合、オーバーレイクラスが透明領域でのクリックを有効なクリックとしてカウントするかどうかを決定する場合） ）。

描画するオーバーレイにDOMリスナーを追加し、有効なクリックである場合は独自のMaps APIクリックイベントをトリガーする必要があります。

例：

FooBar.prototype.onAdd = function() {
  // Create a div and append it to a map pane. 
  var div = document.createElement('div');
  div.style = "height: 100px; width: 100px";
  this.getPanes().overlayLayer.appendChild(div);

  // set this as locally scoped var so event does not get confused
  var me = this;

  // Add a listener - we'll accept clicks anywhere on this div, but you may want
  // to validate the click i.e. verify it occurred in some portion of your overlay.
  google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(me, 'click');
  });

  // Position your overlay etc.
}
12
plexer

googleAPI v3の場合。みんなが下で言ったように、しかしいくつかの修正を伴います：

LocalityCustomOverlay.prototype.onAdd関数の場合：

var self = this;
google.maps.event.addDomListener(this._div, 'click', function(event) {
    // stop click reaction on another layers
    event.stopPropagation();

    // add also event to 3rd parameter for catching
    google.maps.event.trigger(self, 'click', event); 
});

外で直接カスタムオーバーレイに：

google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) {
    console.log('event:', event);
});
1
dimpiax

また、オーバーレイのクリックが下の要素に伝播しないように、イベントの伝播を停止することもできます（ポリゴン、マーカーなど、ペインに依存します）。

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div); // or floatPane

// set this as locally scoped var so event does not get confused
var me = this;

// Add a listener - we'll accept clicks anywhere on this div, but you may want
// to validate the click i.e. verify it occurred in some portion of your overlay.
google.maps.event.addDomListener(div, 'click', function(events) {
    if (/*handling event*/) {
        event.preventDefault(); // The important part
    }
    else {
        google.maps.event.trigger(me, 'click');
    }
});
0
Nir Soudry