Здесь JavaScript API 3.0 - Как реализовать перетаскиваемый маркер

Я хотел бы реализовать перетаскиваемый маркер с недавно выпущенным JavaScript API 3.0.

Используя старый API, это было довольно просто. После установки для атрибута draggable значения true вы могли перемещать маркер по карте.

В руководстве по миграции для нового API 3.0, расположенном [здесь] [1], говорится, что после включения событий на объектах карты и установки для свойства '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 );
});

Спасибо за вашу помощь, Сеппал

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
person hurrassinger    schedule 26.09.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Рабочий пример создания перетаскиваемых маркеров в HERE Maps API for JavaScript 3.0 можно найти в Пример поиска ближайшего маркера. Его настройка состоит из трех частей.

  • Сначала установите 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);
person Jason Fox    schedule 27.09.2014
comment
Большое спасибо за вклад! Таким образом, проблема в моем случае заключалась в перетаскивании по умолчанию, которое необходимо отключить при начале перетаскивания объекта маркера. Мне просто интересно, можно ли также предотвратить переход объектов маркера в положение, в котором была нажата мышь ... необходимо как-то рассчитать. - person hurrassinger; 02.10.2014

arrow_upward
3
arrow_downward

Приведенный выше код не будет работать с перетаскиваемыми маркерами 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);
person nephilim    schedule 31.05.2016