GEvent.removeListenerで一時的にリスナーを消す
GoogleMapsAPIで、地図上にAjaxで動的なマーカーを表示する場合、
地図を移動したらマーカーを再度よみこみ直す処理をつくってみました。
が、マーカーにクリックイベントをつけて吹き出しを表示するようにすると、
場所によっては吹き出しを表示するときに地図が移動するので、
移動し終わった時にマーカーが再読込されて、吹き出しが消えてしまう問題が。
他にもいい方法がありそうですが、とりあえずremoveListenerで一時的にリスナーを消して、
無理矢理問題解決してみました。
※追記：残念ながら、不具合があります。
removeListener部分を実装する前。
修正後。
一見同じですが、
秋田辺りにあるマーカーをクリックすると違いがわかると思います。
そのソースコードの抜粋。
実際の例は、このページを参照してください。12行目。addListener時に、消すリスナーを保持しておくために、
reloadMarkerEventで返値を受けておきます。
-
var reloadMarkerEvent;
-
function load() {
-
if (GBrowserIsCompatible()) {
-
map = new GMap2(document.getElementById("map"));
-
map.addControl(new GLargeMapControl());
-
map.addControl(
-
new GMapTypeControl(),
-
new GControlPosition(G_ANCHOR_TOP_RIGHT,
-
new GSize(10,10)));
-
map.setCenter(new GLatLng(36.705663020513555, 137.76159691810608), 5);
-
displayMark(map);
-
reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
-
}
-
}
5～10行目。openInfoWindowHtmlの前にいったんリスナーを消してます。
openInfoWindowHtmlの後に、移動が終わったら再度Listenerを追加するようにしてます。
-
function addMarker( map, p, text ) {
-
var marker = new GMarker(p);
-
var wattingEvent;
-
GEvent.addListener( marker, "click", function() {
-
GEvent.removeListener(reloadMarkerEvent);
-
marker.openInfoWindowHtml(text);
-
var wattingEvent = GEvent.addListener(map, "moveend", function() {
-
reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
-
GEvent.removeListener(wattingEvent);
-
});
-
-
});
-
map.addOverlay(marker);
-
return marker;
-
}