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

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

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

位于[here] [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
});

我不知道如何在相应的事件中实现这种拖动功能.确定必须计算新位置,但是它会是什么样的,以便根据鼠标位置移动标记？以下代码片段需要以某种方式扩展…

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“这里”

解决方法:

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

>首先设置marker.draggable = true,以便它可以接收拖动事件

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

>第三,监听拖动事件,并使用更新标记
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);

标签：javascript,here-api
来源： https://codeday.me/bug/20190612/1224453.html