地図上にマーカを表示するプログラムです。 マーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
地図上にマーカを表示するプログラムです。 マーカをクリックすると、ポップアップを表示し、詳細情報や写真を表示しています。
HTML、CSSのソースは、地図にボタンを表示と同じです。
マーカ表示のサンプルプログラムでは、日本三名園の位置にマーカを表示しています。
マーカをクリックすると、名称と住所と写真を表示するポップアップが表示されます。
map変数は、leaflet地図のインスタンスです。map変数を外部変数として設定しておけば、いつでもLeafletに対するメソッドを利用できます。
bound変数は、表示されているマーカの最小緯度経度と最大緯度経度が格納されていて、fitBoundsメソッドで、マーカ全体の範囲を表示することができます。
var placeList = [{ // マーカデータの定義
'name':'兼六園', 'addr':'石川県金沢市兼六町',
'coord':{'lat':36.562214, 'lng':136.662544},
'photo':'<img src="img/kenrokuen.jpg" width="180" height="120" />'
},{
'name':'後楽園', 'addr':'岡山県岡山市北区後楽園',
'coord':{'lat':34.667849, 'lng':133.934932},
'photo':'<img src="img/korakuen.jpg" width="180" height="120" />'
},{
'name':'偕楽園', 'addr':'茨城県水戸市常磐町1丁目',
'coord':{'lat':36.374166, 'lng':140.452557},
'photo':'<img src="img/kairakuen.jpg" width="180" height="120" />'
}];
var map; // leaflet地図
var bound; // 表示領域（全体表示で表示される範囲）
マーカを定義する場合、mapに直接登録しても構いませんが、マーカをまとめて削除できると便利ですので、レイヤグループを作成し、レイヤグループに登録するようにしています。 テータ定義された配列をループし、Popupの作成と、Markerの登録を行っています。 登録時には、expandメソッドで、表示領域の範囲を設定しています。
let grp = L.layerGroup(); // マーカ表示用レイヤグループ
map.addLayer(grp);
let latLng = L.latLng(placeList[0].coord.lat, placeList[0].coord.lng);
let bound = L.latLngBounds(latLng, latLng);
for (let i = 0; i < placeList.length; i++) { // マーカを登録
let place = placeList[i];
let str = place.name + '<br>\n' + place.addr + '<br>\n';
if (typeof(place.photo) != 'undefined') str += place.photo;
let popup = L.popup().setContent(str);
latLng = L.latLng(place.coord.lat, place.coord.lng);
bound.extend(latLng);
L.marker(latLng, {title: place.name}).bindPopup(popup).addTo(grp);
}
map.fitBounds(bound); // マーカ全体の範囲を表示