[[:programming_start]] ====== Leaflet マーカーとポップアップ表示 ====== Leaflet v1系を使用してマーカーとポップアップ(情報ウインドウ・バルーン)を表示します。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== マーカーを3つ表示します。マーカーをクリックと吹き出し(ポップアップ)に都道府県名が表示されます。

---- ===== ソースコード =====

---- ===== 説明 ===== マップの基本部分は[[map]]をご覧ください。マーカーを表示するには、L.markerに、緯度・経度・表示するマップ・ポップアップの内容を登録します。何個でも追加できます。


L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都");
//L.marker([ 緯度,経度 ]).addTo(マップ変数).bindPopup(ポップアップ表示内容);

---- ===== おまけ ===== 1.ポップアップが不要な場合は ''bindPopup()'' を削除します。


L.marker([35.6896, 139.6918]).addTo(mymap);
//L.marker([ 緯度,経度 ]).addTo(マップ変数);

2.表示した際にポップアップを開いた状態にする場合は、**setViewより後で** openPopup() オプションを付けて記述して下さい。 openPopupの注意 * setViewより前にあると無視されます * 地図の座標が自動的にポップアップが見える位置まで自動で移動するのでsetViewの座標設定は無視されます。 * ポップアップをは1つだけしか表示できないので複数使用した場合は最後に指定したものが表示されます。


L.marker([35.6050, 140.1234]).addTo(mymap).bindPopup("千葉県");
L.marker([35.8572, 139.6490]).addTo(mymap).bindPopup("埼玉県");

mymap.setView([35.6896, 139.6918], 9);
L.marker([35.6896, 139.6918]).addTo(mymap).bindPopup("東京都").openPopup();