Leaflet をテンプレートにして作成

開始行:
*Leaflet https://leafletjs.com/ ~ Leaflet は Web地図サービスで広く使われるオープンソースのJ... ~ //#iframe(https://koichi-inoue.github.io/JS_Leaflet/, 100... //~ ***サンプルコード シンプルな地図表示の例 -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... <script src ="https://unpkg.com/leaflet@1.7.1/dist/leafl... ~ ***スクリプトの概説 -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: '&copy; <a href="https://www.openst... }).addTo(map); -マーカーを指定（九州産業大学の座標を指定） L.marker([ 33.66983627668292, 130.44487416744232 ] ).addT... .bindPopup('Kyushu Sangyo University') .openPopup(); ~ ***参考｜緯度・経度情報の取得 -GoogleMap を使う 地図上で目的の場所をダブルクリックすると、マーカーが表示... -GeoJSON.io を使う https://geojson.io/ 地図上でマーカーツールを選択して目的の場所をクリックする... ~ ~ ~

終了行:
*Leaflet https://leafletjs.com/ ~ Leaflet は Web地図サービスで広く使われるオープンソースのJ... ~ //#iframe(https://koichi-inoue.github.io/JS_Leaflet/, 100... //~ ***サンプルコード シンプルな地図表示の例 -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... <script src ="https://unpkg.com/leaflet@1.7.1/dist/leafl... ~ ***スクリプトの概説 -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: '&copy; <a href="https://www.openst... }).addTo(map); -マーカーを指定（九州産業大学の座標を指定） L.marker([ 33.66983627668292, 130.44487416744232 ] ).addT... .bindPopup('Kyushu Sangyo University') .openPopup(); ~ ***参考｜緯度・経度情報の取得 -GoogleMap を使う 地図上で目的の場所をダブルクリックすると、マーカーが表示... -GeoJSON.io を使う https://geojson.io/ 地図上でマーカーツールを選択して目的の場所をクリックする... ~ ~ ~

ページ名: