人気記事

広告

記事検索

MOVION.netについて

WEB技術に関することや、気になるWEBサイトなどについて個人的なメモを残すためのブログです。

その他運営サイト

かかわっているサイト

2008年02月17日(日)

GEvent.removeListenerで一時的にリスナーを消す

GoogleMapsAPIで、地図上にAjaxで動的なマーカーを表示する場合、
地図を移動したらマーカーを再度よみこみ直す処理をつくってみました。

が、マーカーにクリックイベントをつけて吹き出しを表示するようにすると、
場所によっては吹き出しを表示するときに地図が移動するので、
移動し終わった時にマーカーが再読込されて、吹き出しが消えてしまう問題が

他にもいい方法がありそうですが、とりあえずremoveListenerで一時的にリスナーを消して、
無理矢理問題解決してみました。
※追記:残念ながら、不具合があります。

removeListener部分を実装する前。

修正後。
一見同じですが、
秋田辺りにあるマーカーをクリックすると違いがわかると思います。


そのソースコードの抜粋。
実際の例は、このページを参照してください。12行目。addListener時に、消すリスナーを保持しておくために、
reloadMarkerEventで返値を受けておきます。

  1. var reloadMarkerEvent;
  2. function load() {
  3.         if (GBrowserIsCompatible()) {
  4.                 map = new GMap2(document.getElementById("map"));
  5.                 map.addControl(new GLargeMapControl());
  6.                 map.addControl(
  7.                         new GMapTypeControl(),
  8.                     new GControlPosition(G_ANCHOR_TOP_RIGHT,
  9.                     new GSize(10,10)));
  10.                 map.setCenter(new GLatLng(36.705663020513555, 137.76159691810608), 5);
  11.                 displayMark(map);
  12.                 reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
  13.         }
  14. }

5~10行目。openInfoWindowHtmlの前にいったんリスナーを消してます。
openInfoWindowHtmlの後に、移動が終わったら再度Listenerを追加するようにしてます。

  1. function addMarker( map, p, text ) {
  2.         var marker = new GMarker(p);
  3.         var wattingEvent;
  4.         GEvent.addListener( marker, "click", function() {
  5.                 GEvent.removeListener(reloadMarkerEvent);
  6.                 marker.openInfoWindowHtml(text);
  7.                 var wattingEvent = GEvent.addListener(map, "moveend", function() {
  8.                         reloadMarkerEvent = GEvent.addListener(map, "moveend", reloadMark);
  9.                         GEvent.removeListener(wattingEvent);
  10.                         });
  11.  
  12.                 });
  13.         map.addOverlay(marker);
  14.         return marker;
  15. }