javascript - 将 Leaflet Popup 值插入表单并提交

Question

这是我的 map 代码，它工作完美，不用担心。我只是想知道如何获取弹出窗口显示的 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);
}