マーカーの画像を動的に変更する

Yahoo! JavaScriptマップAPIで表示している画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、好きな画像をマーカーとして表示させるのページを。

  var myMap = new Y.Map("map");
  myMap.drawMap(
    new Y.LatLng(35.710139, 139.810833), 
    14,
    Y.LayerSetId.NORMAL
  );


  // ○の画像
  var icon_o = new Y.Icon('o.png', { iconAnchor: new Y.Point(16,16) });

  // ×の画像
  var icon_x = new Y.Icon('x.png', { iconAnchor: new Y.Point(16,16) });

  // マーカー
  var myMarker = new Y.Marker(
    new Y.LatLng(35.710139, 139.810833),
    {
      icon: icon_o // はじめは〇
    }
  );
  myMap.addFeature(myMarker);

  // マーカーにクリックイベントをbind
  myMarker.bind('click', function(){
    // 末尾の一致で一致とします
    if (myMarker.getDOMNode().src.match(icon_o.image + '$')) {
      // ○なら×を
      myMarker.setIcon(icon_x);
    } else if (myMarker.getDOMNode().src.match(icon_x.image + '$')) {
      // ×なら〇を
      myMarker.setIcon(icon_o);
    } else {
      // え?
      alert('Oh, my God!');
    }
  });

どこかでトグル持ってるほうがいいのかなぁ。

デフォルトのマーカーにしたいときは、Y.Icon.DEFAULT_ICONを与えてやれば良いようです。

    marker.setIcon(Y.Icon.DEFAULT_ICON);