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值插入表单并提交

1 个答案: