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

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

1 个答案: