在传单地图更新表单输入字段上设置并拖动标记，而无需发送

Question

包括传单和jQuery在内，我有以下代码：

<form name="formone"> ...
<div id="clickmap">
<div id="map"></div>

<script type="text/javascript">
    var map = L.map('map').setView([34.00, 8.00, 6);   
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
function onMapClick(e)  {
    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var marker = L.marker([lat, lng], {draggable:true}).addTo(map).bindPopup($('<a href="#clickmap">Remove ME</a>').click(function() { map.removeLayer(marker);     })[0]);

// latnew = marker._latlng.lat;  // test        
// latold = document.formone.GPSLatitude.value; // test
                        }
map.on('click', onMapClick);

// function simply() {} // test
</script>

</div><!-- end clickmap -->

...

<input type="text" name="GPSLatitude" onclick="javascript:simply();" value="<?php echo $GPSLatitudeDec; ?>" size="25" maxlength="20" />
...

... </form>

通过单击，我在地图上设置了一个标记。 在此过程中，我想在提交之前更新输入字段。 另外，如果我在地图上拖动标记，则输入字段应更新。

最后一个标记也可以删除，因此我只需要处理一个标记。

有人可以概述一下该如何做吗？

我不打算在jQuery或Leaflet-libaries中进行练习。 是否准备了任何功能变通办法？

谢谢你，罗布

Answer 1

如果页面上有两个文本框，那么如何从onMapClick（e）函数内部更新它们的值？

...
<p>Latitude: <input id="latInput"> :: Longitude: <input id="lngInput"></p>
<script>
...
function onMapClick(e)  {

... //whatever code you've already put

document.getElementById('latInput').value = lat;
document.getElementById('lngInput').value = lng;
}
...
</script>

编辑：这里也共享类似的答案： https : //stackoverflow.com/a/27272673/4355695 ，带有工作示例： http : //plnkr.co/edit/iyMhaoAyllr2uNSOHhS9?p=preview

编辑：既可以通过单击也可以通过鼠标拖动来设计出完整的解决方案，并且还具有反向功能（表单字段中的用户输入值可以移动标记）。 它还会记住用户标记的先前位置。 参见工作示例： http : //plnkr.co/edit/PTFlun?p=preview