这里是Maps API:检测何时将标记拖放到折线上 [英] Here Maps API: Detecting when a Marker is dragged and dropped onto a Polyline

问题描述

我在Here Map上有可拖动的标记，我想检测何时将标记拖放到折线上.我一直无法找到一种好的方法来检测标记是否落在折线上或折线附近.如果可以在Polyline对象中添加一个"dragend"事件侦听器，那将是很好的选择，但是除实际地图外，其他对象似乎不支持这种方法.

I have draggable markers on a Here Map, and I'd like to detect when a marker is dragged and dropped onto a Polyline. I haven't been able to find a good way to detect that the marker is dropped on or near the polyline. It would be nice if I could add an "dragend" event listener to the Polyline object, but that doesn't seem to be supported on objects other than the actual map.

另一种方法是从拖尾发生的位置确定到折线的距离，但是我还没有找到一种计算该距离的直接方法.(尽管我找到了找到与点最近的标记的示例.)

Another approach would be to determine the distance to the Polyline from the point that the dragend occurs, but I haven't found a straightforward way to calculate that distance. (Though I've found the example for finding the nearest marker to a point.)

有什么建议吗?

推荐答案

可以在地图对象上添加 dragend 事件监听器.

It is possible to add dragend event listener on map objects.

此代码应为您工作(在3.0 API版本中):

This code should work for you (in 3.0 API version):

var lineString = new H.geo.LineString([0, 0, 0, 50, 50, 0]),
    polyline = new H.map.Polyline(lineString, {style: {lineWidth: 15, strokeColor: 'red'}}),
    marker = new H.map.Marker({lat: 30, lng: 0});

  // Ensure that the marker can receive drag events
  marker.draggable = true;

  // add objects to the map
  map.addObjects([polyline, marker]);

  // set map center and zoom
  map.setCenter({lat: 30, lng: 0});
  map.setZoom(3);

  // disable map's behavior and calculate the offset between mouse and target's position
  // when starting to drag a marker object:
  marker.addEventListener('dragstart', function(ev) {
    var target = ev.target,
        pointer = ev.currentPointer,
        targetPosition = map.geoToScreen(target.getGeometry());

    target['offset'] = new H.math.Point(pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
    behavior.disable();
  }, false);

  // Listen to the drag event and move the position of the marker
   marker.addEventListener('drag', function(ev) {
    var target = ev.target,
        pointer = ev.currentPointer;
    target.setGeometry(map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y));
  }, false);

  // re-enable behavior and check if marker was dropped on polyline
  marker.addEventListener('dragend', function(ev) {
    behavior.enable();
    var pointer = ev.currentPointer,
        objects = map.getObjectsAt(pointer.viewportX, pointer.viewportY),
        droppedOnPolyline = false;
    objects.forEach(function(object) {
      if (object === polyline) {
        droppedOnPolyline = true;
      }
    });

    console.log('marker dropped on polyline? %s', droppedOnPolyline);
  }, false);

这篇关于这里是Maps API:检测何时将标记拖放到折线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！