如何通過leaflet js中的點擊標記獲取最新的經緯度值？

Question

我想通過單擊 map 上的標記來獲取緯度和經度。 這是我的代碼： http://jsfiddle.net/estri012/2c6bz0ap/1/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <!-- leaflet css -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
    <!--leaflet js after leaflet css-->
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
    <title>Fetch JSON from API</title>
</head>
<body>
    <h1>Letak Node 1</h1>

    <p>
        latitude: <span id="lat"></span><br />
        longitude: <span id="lon"></span>
    </p>
    <style>
        #node1Map { height: 260px; }
      </style>
      <div id="node1Map"></div>
    <script>
    const mymap = L.map('node1Map').setView([0, 0], 1);
    const attribution ='&copy: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

    const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    const tiles = L.tileLayer(tileUrl, { attribution });
    tiles.addTo(mymap);

    // get coordinate
    var lat, lng;

    mymap.on('click', function(e) {
    lat = e.latlng.lat;
    lng = e.latlng.lng;
    console.log(lat);
    console.log(lng);
    L.marker([lat, lng]).addTo(mymap);
    document.getElementById('lat').textContent = lat;
    document.getElementById('lon').textContent = lng;
    });

    </script>
   </body>
   </html>

當我點擊 map 時，它會顯示我點擊的所有標記和所有緯度、經度值。 問題是每次我在 map 上單擊鼠標時，總是會彈出標記。 當我在 map 上單擊另一個 position 時，最后一個標記仍然存在。 我只想在最后一次單擊鼠標時彈出標記並從最后一次鼠標單擊中獲取最后的緯度和經度。 怎么做？

Answer 1

您可以將標記保存為變量，然后在添加新標記之前刪除舊標記。

// get coordinate
var lat, lng, marker;
mymap.on("click", function (e) {
  if (marker) mymap.removeLayer(marker);
  lat = e.latlng.lat;
  lng = e.latlng.lng;
  console.log(lat);
  console.log(lng);
  marker = L.marker([lat, lng]).addTo(mymap);
  document.getElementById("lat").textContent = lat;
  document.getElementById("lon").textContent = lng;
});

如何通過leaflet js中的點擊標記獲取最新的經緯度值？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-13 08:07:21

如何通過leaflet js中的點擊標記獲取最新的經緯度值？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-13 08:07:21

解決方案1
1 已采納 2020-05-13 08:07:21