#author("2021-12-02T13:05:05+09:00;2021-12-02T12:10:42+09:00","default:inoue.ko","inoue.ko") #author("2023-08-29T16:43:38+09:00;2021-12-02T12:10:42+09:00","default:inoue.ko","inoue.ko") *Leaflet https://leafletjs.com/ ~ Leaflet は Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。モバイルでも使えるインタラクティブな地図をWebページ上に簡単に表示できます。 ~ //#iframe(https://koichi-inoue.github.io/JS_Leaflet/, 100%,75%) //~ ***サンプルコード シンプルな地図表示の例 -DEMO：https://koichi-inoue.github.io/JS_Leaflet/ -CODE：https://github.com/koichi-inoue/JS_Leaflet ~ ***サンプルコード２ スマートフォンで現在位置を表示する例 -DEMO：https://koichi-inoue.github.io/YouAreHere/ -CODE：https://github.com/koichi-inoue/YouAreHere ~ ***Leaflet を利用するには CDNから CSS と JS を読み込むだけで利用できます。 <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" > <script src ="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> ~ ***スクリプトの概説 -HTML上の地図を配置する div要素の id を設定 var map = L.map('map'); -地図の中心の緯度・経度とズームレベルを指定 map.setView( [35, 136] , 5); -タイルレイヤーの指定（OpenStreetMap を利用） L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); -マーカーを指定（九州産業大学の座標を指定） L.marker([ 33.66983627668292, 130.44487416744232 ] ).addTo(map) .bindPopup('Kyushu Sangyo University') .openPopup(); ~ ***参考｜緯度・経度情報の取得 -GoogleMap を使う 地図上で目的の場所をダブルクリックすると、マーカーが表示されるとともに住所と緯度・経度が表示されます。 -GeoJSON.io を使う https://geojson.io/ 地図上でマーカーツールを選択して目的の場所をクリックすると右サイドに GeoJSON形式のデータが表示されます。"coordinates" として表示される最初の数字が経度、次の数字が緯度になっています。 ~ ~ ~