<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>現在地取得</title> <!-- Leaflet CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <style> #map { height: 400px; } .big-button { font-size: 16px; /* フォントサイズを調整 */ padding: 10px 20px; /* 上下左右の余白を追加 */ } </style> </head> <body> <h1>現在地取得と表示</h1> <!-- ボタンで位置情報を取得 --> <button onclick="getCurrentLocation()" class="big-button"> 現在地取得 </button> <!-- ボタンで位置情報をコピー --> <button onclick="copyLocation()" class="big-button">位置情報コピー</button> <!-- 位置情報表示用の要素 --> <p id="location"></p> <!-- 地図表示用の要素 --> <div id="map"></div> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> // Leafletを使用するための初期設定 var map = L.map("map").setView([0, 0], 18); L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png", { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', }).addTo(map); var marker; // 現在の位置情報を取得する関数 function getCurrentLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } // 位置情報を表示し、Leafletの地図上にマーカーを表示する関数 function showPosition(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; document.getElementById("location").innerHTML = latitude + "," + longitude; // 地図上にマーカーを表示 if (marker) { marker.setLatLng([latitude, longitude]).update(); } else { marker = L.marker([latitude, longitude]).addTo(map); } // 地図を現在の位置に移動 map.setView([latitude, longitude], 18); } // マップ上をクリック(またはタッチ)したときのイベントハンドラ map.on("click", function (e) { // クリックした位置にマーカーを移動 if (marker) { marker.setLatLng(e.latlng).update(); // 地図をクリックした位置に移動 map.setView(e.latlng, 18); document.getElementById("location").innerHTML = e.latlng.lat + "," + e.latlng.lng; } }); // 位置情報をクリップボードにコピーする関数 function copyLocation() { var locationText = document.getElementById("location").innerText; navigator.clipboard .writeText(locationText) .then(function () { alert("位置情報がコピーされました!"); }) .catch(function (err) { console.error("位置情報のコピーに失敗しました:", err); }); } </script> </body> </html>
leafletで現在地を表示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>現在地取得</title> <!-- Leaflet CSS --> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <style> #map { height: 400px; } .big-button { font-size: 16px; /* フォントサイズを調整 */ padding: 10px 20px; /* 上下左右の余白を追加 */ } </style> </head> <body> <h1>現在地取得と表示</h1> <!-- ボタンで位置情報を取得 --> <button onclick="getCurrentLocation()" class="big-button">現在地取得</button> <!-- ボタンで位置情報をコピー --> <button onclick="copyLocation()" class="big-button">位置情報コピー</button> <!-- 位置情報表示用の要素 --> <p id="location"></p> <!-- 地図表示用の要素 --> <div id="map"></div> <!-- Leaflet JS --> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script> // Leafletを使用するための初期設定 var map = L.map('map').setView([0, 0], 18); L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>' }).addTo(map); var marker; // 現在の位置情報を取得する関数 function getCurrentLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } // 位置情報を表示し、Leafletの地図上にマーカーを表示する関数 function showPosition(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; document.getElementById("location").innerHTML = latitude + "," + longitude; // 地図上にマーカーを表示 if (marker) { marker.setLatLng([latitude, longitude]).update(); } else { marker = L.marker([latitude, longitude]).addTo(map); } // 地図を現在の位置に移動 map.setView([latitude, longitude], 18); } // 位置情報をクリップボードにコピーする関数 function copyLocation() { var locationText = document.getElementById("location").innerText; navigator.clipboard.writeText(locationText).then(function() { alert("位置情報がコピーされました!"); }).catch(function(err) { console.error('位置情報のコピーに失敗しました:', err); }); } </script> </body> </html>
Google ColaboratoryでJavaScript実行
%%js document.querySelector('#output-area').innerHTML = '<h1>Hello, World!</h1>'