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);