トップ > 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);
      }

      // マップ上をクリック（またはタッチ）したときのイベントハンドラ
      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>