Question

我在mapbox中有一个可拖动的功能。但是，当我拖动此功能时，它会固定在鼠标上（它会跳转）。我不要有防止这种情况发生的方法吗？

我的行为是这样（抓住边缘的点）：https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

我想拥有的东西：https://www.mapbox.com/mapbox-gl-js/example/drag-a-marker/

区别在于，第一个是功能，第二个是html标记。但是我不想使用html标记，因为它们会对性能产生负面影响。

Answer 1

主要思想是计算特征与鼠标起点之间的像素差异，并在设置新坐标时应用：

var delta = {
  x: 0,
  y: 0
};
function onMove(e) {
  var coordsXY = {
    x: e.point.x + delta.dx,
    y: e.point.y + delta.dy
  };
  var coords = map.unproject(coordsXY);
  ...
}

map.on('mousedown', 'point', function(e) {
  // Prevent the default map drag behavior.
  e.preventDefault();

  var featureXY = map.project(e.features[0].geometry.coordinates.slice());
  var mouseXY = e.point;
  delta = {
    dx: featureXY.x - mouseXY.x,
    dy: featureXY.y - mouseXY.y
  };
  ...
}

[https://jsfiddle.net/gfs8b59c/]

Mapbox防止拖动功能时锚定行为

1 个答案: