将 Leaflet Popup 值插入表单并提交

Question

这是我的地图代码，它运行良好，不用担心。我只是想知道如何获得弹出窗口显示的Lat Lng 值以在单击时插入表单？

所以基本上它会像，

1. 用户点击地图

2. 坐标弹出窗口（就像现在一样）并在相同的点击坐标上填写表单

3. 用户点击提交！

这是代码，

<script>

var mymap = L.map('mapid').setView([38.47939, -99.49219], 5);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYnJldHQyMjI3OCIsImEiOiJjajAzNzZjZTkwOWNtMzJxbHZjMmVwZ2hyIn0.cWzkt6Gj_N3SZ8GKzqhByA', {
    }).addTo(mymap);

    var popup = L.popup();

    function onMapClick(e) {

        popup
            .setLatLng(e.latlng)
            .setContent("Copy and Paste into the Form \n" + e.latlng.toString())
            .openOn(mymap);

    }

    mymap.on('click', onMapClick);


</script>

我还包括了我的表单以防万一 - 表单按原样工作，您可以手动输入数据并将其插入 MySQL 我只需要帮助弄清楚自动插入...非常感谢任何帮助.

<div class="container">
  {% from "_formhelper.html" import render_field %}
  <form method=post action="/add_spot/">
    <dl>
      {{render_field(form.lat)}}
      {{render_field(form.lng)}}
    </dl>
    <p><input type=submit value=Submit></p>
  </form>
  {% if error %}
    <p class="error">{{error}}</p>
  {% endif %}
</div>

Answer 1

在您的 onMapClicked 函数中使用：

document.getElementById('your-input-id').value = e.latlng.toString();

假设您有以下 HTML 表单：

<form>
    <input type="text" name="lat-lng" id="lat-lng" />
    <input type="submit" value="GO" />
</form>

这将是你的功能：

function onMapClick(e) {
    document.getElementById('lat-lng').value = e.latlng.toString();

    popup
        .setLatLng(e.latlng)
        .setContent("Copy and Paste into the Form \n" + e.latlng.toString())
        .openOn(mymap);
}