Question

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

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

位于[此处] [1]的新API 3.0的迁移指南指出，在地图对象上启用事件并设置＆＃39;可拖动＆＃39;财产到真实＆＃39;必须实施相应的事件。

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 );
});

感谢您的帮助， Seppal

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＆＃34;此处＆＃34;

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);

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

Answer 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);

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

2 个答案: