Question

您好我正在使用以下https://github.com/perliedman/leaflet-control-geocoder来获取地图上的位置。但是当我得到结果时，我想要选择移动标记，以便我可以调整坐标。我找到了一个移动标记的代码，并显示了2个字段中的坐标，但我有问题将两个代码连接在一起。另外我如何得到结果坐标显示在两个flields中。我对传单地图没有太多经验，所以任何帮助都会受到赞赏。

谢谢达尼

我的代码：

<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插件对搜索请求中收到的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/

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

1 个答案: