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

Question

您好，我正在使用以下 https://github.com/perliedman/leaflet-control-geocoder 来获取地图上的位置。但是当我得到结果时，我希望可以选择移动标记以便调整坐标。我找到了一个移动标记并在 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>

Answer 1

简单参考Leaflet Control Geocoder API.

您可以 customize what the plugin does with the result 它从搜索请求中接收。默认情况下，它会创建一个（固定的）标记，绑定一个弹出窗口并打开它。

对于你的情况，你可以这样做：

var geocoder = L.Control.geocoder().addTo(map),
    latInput = document.getElementById('latitude'),
    lngInput = document.getElementById('longitude'),
    previousMarker;

// Customize what to do from the result.
geocoder.markGeocode = function (result) {
    var latlng = result.center;

    // Remove previous marker if any.
    if (previousMarker) {
        map.removeLayer(previousMarker);
    }

    previousMarker = L.marker(latlng, {
        draggable: true // Create a draggable marker.
    }).addTo(map).
    on('dragend', onDragEnd). // Attach position display.
    bindPopup(result.html). // Emulate Geocoder default behaviour.
    openPopup(); // bind a popup and open it right away.

    displayLatLng(latlng); // Display position right away.
};

function onDragEnd(event) {
    var latlng = event.target.getLatLng();

    displayLatLng(latlng);
}

function displayLatLng(latlng) {
    latInput.value = latlng.lat;
    lngInput.value = latlng.lng;
}

演示：http://jsfiddle.net/ve2huzxw/11/

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

leaflet geocoder and draggable marker show results in input field

javascript

jquery

dictionary

openstreetmap

leaflet