Leaflet / Mapbox - 拖放

Question

我有一个使用 Mapbox / Leaflet JS 的基于网络的地图 API。

在地图上，我根据推送到浏览器的 GPS 数据移动了几个固定标记和其他标记。当移动标记落在静止标记上时，我想识别涉及的两个标记。

我已经为移动标记的 "dragend" 事件实现了一个处理程序，它使我能够识别 dragged/dropped 的标记。

我的问题是，我怎样才能识别它掉落在哪个标记上？

Answer 1

这很难做到，因为唯一能让您正确识别标记的是它的 latitude/longitude 位置。因此，如果您尝试将标记放到 lat/lng 0,0 的标记上，您需要将其准确地放到那个位置，这将是一件非常困难的事情。

你当然可以在其中建立某种容差，但这种容差需要根据缩放级别而变化，我认为这很难做到正确。你可以这样做：

// Drag has ended
marker.on('dragend', function (e) {

  // Get position of dropped marker
  var latLng = e.target.getLatLng();

  // Object to hold nearest marker and distance
  var nearest = {};

  // Loop over layer which holds rest of the markers
  featureLayer.eachLayer(function(layer) {

    // Calculate distance between each marker and dropped marker
    var distance = latLng.distanceTo(layer.getLatLng());

    // Set the first as nearest
    if (!nearest.marker) {
      nearest.marker = layer;
      nearest.distance = distance;

    // If this marker is nearer, set this marker as nearest
    } else if (distance < nearest.distance) {
      nearest.marker = layer;
      nearest.distance = distance;
    }

  });

});

Plunker 示例：http://plnkr.co/edit/GDixNNDGqW9rvO4R1dku?p=preview

现在 nearest 对象将保留离您的放置位置最近的标记。最近距离可能因缩放级别而异。当您处于缩放级别 1 时，看起来您可能将其准确地放在另一个标记上，但您可能相距数千英里。在缩放 18 时，差异会小得多，但要将其完全放在相同的 lat/lng 上几乎是不可能的。否则，您可以简单地将所有 latlng 与丢弃的 latlng 进行比较，但这在实践中是行不通的。

所以现在你有了最近的标记，它到你可以实现公差的丢弃标记的距离，大致如下：if (nearest.distance < (x / y)) 其中 x 是距离，y缩放级别。这是你需要玩弄才能正确的东西。一旦您确定了正确的公差，您就可以在处理程序中实现它以及距离比较。

祝你好运，希望对你有所帮助

Leaflet / Mapbox - 拖放

Leaflet / Mapbox - Drag & Drop

drag-and-drop

marker

leaflet

mapbox