javascript - 在传单 map 更新表单输入字段上设置并拖动标记而不发送

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>

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

最后一个标记也可以被删除，这样我就只需处理一个标记。

有人能给我概述一下如何做到这一点吗？

我不会在 jQuery 或 Leaflet 库中进行练习。是否准备了任何函数解决方法？

谢谢你，罗布

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