Javascript 传单地理编码器和可拖动标记在输入字段中显示结果_Javascript_Jquery_Dictionary_Leaflet_Openstreetmap

Javascript 传单地理编码器和可拖动标记在输入字段中显示结果

javascript jquery dictionary leaflet

Javascript 传单地理编码器和可拖动标记在输入字段中显示结果,javascript,jquery,dictionary,leaflet,openstreetmap,Javascript,Jquery,Dictionary,Leaflet,Openstreetmap,嗨，我用下面的方法来获取地图上的位置。但是当我得到结果时，我希望有移动标记的选项，这样我就可以调整坐标。我发现一个代码正在移动标记，并在2个字段中显示坐标，但我无法将这两个代码连接在一起。还有我如何得到结果坐标以显示在两个字段中。我没有太多的经验与传单地图，所以任何帮助将不胜感激多谢各位丹妮我的代码： <html lang="en"> <head> <link rel="stylesheet" href="http://cdn.leaflet

嗨，我用下面的方法来获取地图上的位置。但是当我得到结果时，我希望有移动标记的选项，这样我就可以调整坐标。我发现一个代码正在移动标记，并在2个字段中显示坐标，但我无法将这两个代码连接在一起。还有我如何得到结果坐标以显示在两个字段中。我没有太多的经验与传单地图，所以任何帮助将不胜感激

多谢各位丹妮

我的代码：

<html lang="en">
   <head>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
      <link rel="stylesheet" href="assets/css/leaflet-control-geocoder.css" />
   </head>
   <body>
      <div class="map" id="map" style="width: 600px; height: 400px"></div>
      <input id="latitude" type="text" name="latitude" />
      <input id="longitude" type="text" name="longitude" />
   </body>
   <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   <script src="assets/js/leaflet-control-geocoder.js"></script>
   <script type="text/javascript">
      var map = L.map('map').setView([0, 0], 2);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      L.Control.geocoder().addTo(map);

      var marker = L.marker([51.441767, 5.470247],{
         draggable: true
      }).addTo(map);

      marker.on('dragend', function (e) {
         document.getElementById('latitude').value = marker.getLatLng().lat;
         document.getElementById('longitude').value = marker.getLatLng().lng;
      });
   </script>
</html>


var map=L.map（'map'）.setView（[0,0]，2）；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
L.Control.geocoder（）.addTo（map）；
var marker=L.marker（[51.441767,5.470247]{
德拉格布尔：是的
}).addTo（地图）；
标记.on（'dragend'，函数（e）{
document.getElementById（'latitude'）。value=marker.getLatLng（）.lat；
document.getElementById（'longitude'）。value=marker.getLatLng（）.lng；
});

请参考传单控制地理编码器

您可以查看插件如何处理从搜索请求接收到的内容。默认情况下，它创建一个（固定的）标记，绑定一个弹出窗口并打开它

在您的情况下，您可以：

var geocoder=L.Control.geocoder（）.addTo（map），
latInput=document.getElementById（'latitude'），
lngInput=document.getElementById（'longitude'），
先前标记；
//从结果中自定义要执行的操作。
geocoder.markGeocode=函数（结果）{
var latlng=结果中心；
//删除以前的标记（如果有）。
if（先前的标记）{
地图移除层（先前标记）；
}
上一个标记=左标记（板条{
draggable:true//创建一个可拖动的标记。
}).addTo（地图）。
on（'dragend'，onDragEnd）。//附加位置显示。
bindPopup（result.html）。//模拟地理编码器的默认行为。
openPopup（）；//绑定一个弹出窗口并立即打开它。
displayLatLng（latlng）；//立即显示位置。
};
函数onDragEnd（事件）{
var latlng=event.target.getLatLng（）；
显示latlng（latlng）；
}
功能显示latlng（latlng）{
latInput.value=latlng.lat；
lngInput.value=latlng.lng；
}

演示：

非常感谢，这正是我想要的。谢谢您的帮助还有一个问题，我如何删除旧标记，因为我现在有原始标记，当我进行新搜索时，我也会得到下一个标记，谢谢您只需保留您创建的标记的引用，并在下一个搜索结果时将其从地图中删除？我将编辑上述代码。演示：