JavaScript API 3.0 - 如何实现可拖动标记 [英] Here JavaScript API 3.0 - How to implement a draggable marker

问题描述

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

I would like to implement a draggable marker with the recently released JavaScript API 3.0.

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

Using the old API it was quite easy. After setting the draggable attribute to true you were able to move the marker on the map around.

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

The migration guide for the new API 3.0 located [here][1] states that after enabling events on map objects and setting the 'draggable' property to 'true' the corresponding events have to be implemented.

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

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

I'm not sure how to implement this dragging functionality in the corresponding events though. For sure the new location has to be calculated, but what would it look like so that the marker is moved according to the mouse position? The following code snippet needs to be extended somehow ...

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

感谢您的帮助，
Seppal

Thanks for your help, 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 这里

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 "here"

推荐答案

在 HERE Maps API中创建可拖动标记的工作示例JavaScript 3.0 可以在查找最近的标记示例。设置它有三个部分。

A working example of creating draggable markers in the HERE Maps API for JavaScript 3.0 can be found in the Find the nearest marker example. There are three parts to setting it up.

• 首先设置 marker.draggable = true 所以它可以接收拖动事件

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

其次禁用基础地图的默认可拖动性
（ ie H.mapevents.Behavior 的实例，当开始拖动
a marker对象时：

Secondly disable the default draggability of the underlying map (i.e. the instance of H.mapevents.Behavior) when starting to drag a marker object:

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 API 3.0 - 如何实现可拖动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！