トップ > leafletで現在地を表示

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>