Leafletで表示しているマーカーの画像を変更させるサンプルプログラム。下の例では、クリックするたびに○と×が交互に表示されます。画像を表示させるだけの場合は、好きな画像をマーカーとして表示させるのページを。
var myMap = L.map("map", {
zoom: 13,
center: [35.710139, 139.810833],
});
// タイルレイヤにはオープンストリートマップを拝借
var osm = L.tileLayer("https://tile.openstreetmap.jp/{z}/{x}/{y}.png", {
attribution: "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
});
osm.addTo(myMap);
// ○の画像
var icon_o = L.icon({ iconUrl: "o.png", iconAnchor: [15, 15] });
// ×の画像
var icon_x = L.icon({ iconUrl: "x.png", iconAnchor: [15, 15] });
// マーカー
var myMarker = L.marker(
[35.710139, 139.810833],
{
icon: icon_o
}
);
myMarker.addTo(myMap);
// マーカーにクリックイベントをbind
myMarker.on('click', function(){
if (myMarker.getIcon() === icon_o) {
// ○なら×を
myMarker.setIcon(icon_x);
} else if (myMarker.getIcon() === icon_x) {
// ×なら○を
myMarker.setIcon(icon_o);
} else {
// え?
alert('Oh, my God!');
}
});