JavaScript API 3.0 - 如何实现可拖动标记答案

【问题标题】：Here JavaScript API 3.0 - How to implement a draggable markerJavaScript API 3.0 - 如何实现可拖动标记
【发布时间】：2014-09-26 11:53:11
【问题描述】：

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

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

位于 [此处][1] 的新 API 3.0 迁移指南指出，在地图对象上启用事件并将 'draggable' 属性设置为 'true' 后，必须实现相应的事件。

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

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

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

感谢您的帮助，隔壁

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

【问题讨论】：

标签： javascript here-api

【解决方案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);

其次禁用底层地图的默认可拖动性（即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);

【讨论】：

非常感谢您的意见！所以我的问题是开始拖动标记对象时需要禁用的默认可拖动性。我只是想知道是否也可以防止标记对象“跳转”到单击鼠标的位置......需要以某种方式计算。

【解决方案2】：

上面的代码不适用于可拖动的 DOM 标记所以最终的变化是：

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

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

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

【讨论】：