将 Leaflet Popup 值插入表单并提交

Question

这是我的地图代码，它工作完美，不用担心。我只是想知道如何获得弹出窗口显示的 Lat Lng 值以插入到单击时的表单中？

基本上就是这样，

用户点击地图
坐标弹出窗口（就像他们现在所做的那样）并在同一点击坐标填写表格
用户点击提交！

这是代码，

<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);
}

将 Leaflet Popup 值插入表单并提交

Insert Leaflet Popup value into form and submit

javascript

wtforms

leaflet

flask-wtforms