javascript - Here JavaScript API 3.0 - 如何实现可拖动标记

Question

我想用最近发布的 JavaScript API 3.0 实现一个可拖动标记。

使用旧的 API 非常简单。将 draggable 属性设置为 true 后，您就可以在 map 上四处移动标记。

位于 [此处][1] 的新 API 3.0 的迁移指南指出，在 map 对象上启用事件并将“可拖动”属性设置为“真”后，必须实现相应的事件。

marker.addEventListener('dragstart', function() {
//handle drag start here
});
marker.addEventListener('drag', function() {
//handle drag here
});
marker.addEventListener('dragend', function() {
//handle drag end here
});

虽然我不确定如何在相应的事件中实现此拖动功能。当然必须计算新位置，但是根据鼠标位置移动标记会是什么样子呢？以下代码片段需要以某种方式扩展......

marker.addEventListener('drag', function(evt) {
  var coord = map.screenToGeo(evt.currentPointer.viewportX,
            evt.currentPointer.viewportY);
  evt.target.setPosition( coord );
});

感谢您的帮助， 萼片

事件[1]:http://developer.here.com/documentation/download/maps_js_html5_nlp/3.0.5/Maps%20API%20for%20JavaScript%20v3.0.5%20Migration%20Guide.pdf “这里”

Answer 1

在 HERE Maps API for JavaScript 3.0 中创建可拖动 标记的工作示例可以在 Find the nearest marker 中找到。例子。设置分为三个部分。

• 首先设置marker.draggable = true使其可以接收drag事件

  marker = new H.map.Marker(...);
  marker.draggable = true;
  map.addObject(marker);
  

• 其次禁用底层 map 的默认可拖动性(即 H.mapevents.Behavior 的实例)开始拖动时标记对象:

  map.addEventListener('dragstart', function(ev) {
    var target = ev.target;
    if (target instanceof H.map.Marker) {
      behavior.disable();
    }
  }, false);
  
  
  map.addEventListener('dragend', function(ev) {
    var target = ev.target;
    if (target instanceof mapsjs.map.Marker) {
      behavior.enable();
    }
  }, false);
  

• 第三次监听 drag 事件，并使用更新标记setPosition()

  map.addEventListener('drag', function(ev) {
    var target = ev.target,
        pointer = ev.currentPointer;
    if (target instanceof mapsjs.map.Marker) {
      target.setPosition(map.screenToGeo(pointer.viewportX, pointer.viewportY));
    }
  }, false);