如何在 HERE 地图 Javascript API 中创建可拖动的信息气泡？

Question

是否可以在 HERE 地图中创建可拖动的信息气泡 Javascript API？

我已经能够通过单击文档中示例中的图钉来打开信息气泡。但是我找不到任何关于能够拖动生成的信息气泡的信息。

Answer 1

这里地图在API资源管理器中提供了一个示例，请看一下。

Answer 2

HERE 可爱的人们帮助了我

var draggedBubble = null;
var linkPolyline = null;

/**
 * Creates a new marker and adds it to a group
 * @param {H.map.Group} group       The group holding the new marker
 * @param {H.geo.Point} coordinate  The location of the marker
 * @param {String} html             Data associated with the marker
 */
function addMarkerToGroup(group, coordinate, html) {
  var marker = new H.map.Marker(coordinate);
  // add custom data to the marker
  marker.setData(html);
  group.addObject(marker);
}

/**
 * Add two markers showing the position of Liverpool and Manchester City football clubs.
 * Clicking on a marker opens an infobubble which holds HTML content related to the marker.
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function addInfoBubble(map) {
  var group = new H.map.Group();

  map.addObject(group);

  // add 'tap' event listener, that opens info bubble, to the group
  group.addEventListener('tap', function (evt) {
    // event target is the marker itself, group is a parent event target
    // for all objects that it contains
    var bubble =  new H.ui.InfoBubble(evt.target.getPosition(), {
      // read custom data
      content: evt.target.getData()
    });

    // show info bubble
    ui.addBubble(bubble);

    bubble.getElement().setAttribute("draggable", true);
    bubble.getElement().addEventListener("dragstart", function(evt2) {
      draggedBubble = bubble;
      evt2.dataTransfer.setDragImage(this, 0, 0);

      var markerPosition = evt.target.getPosition();
      var bubblePosition = bubble.getPosition();
      var points = [markerPosition.lat, markerPosition.lng, 0, bubblePosition.lat, bubblePosition.lng, 0];
      var strip = new H.geo.Strip(points);
      linkPolyline = new H.map.Polyline(strip);
    }, false);

    bubble.getElement().addEventListener("drag", function(evt3) {

    }, false);

  }, false);

  addMarkerToGroup(group, {lat:53.439, lng:-2.221},
    '<div><a href=\'http://www.mcfc.co.uk\' >Manchester City</a>' +
    '</div><div >City of Manchester Stadium<br>Capacity: 48,000</div>');

  addMarkerToGroup(group, {lat:53.430, lng:-2.961},
    '<div ><a href=\'http://www.liverpoolfc.tv\' >Liverpool</a>' +
    '</div><div >Anfield<br>Capacity: 45,362</div>');
}

/**
 * Boilerplate map initialization code starts below:
 */

// initialize communication with the platform
var platform = new H.service.Platform({
  app_id: '<App_ID>',
  app_code: '<App_Code>',
  useCIT: true,
  useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

// initialize a map - this map is centered over Europe
var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map,{
  center: {lat: 53.430, lng: -2.961},
  zoom: 7
});

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// create default UI with layers provided by the platform
var ui = H.ui.UI.createDefault(map, defaultLayers);

map.getElement().addEventListener("dragover", function(evt) {
  evt.preventDefault();
});

map.getElement().addEventListener("drop", function(evt) {
  evt.preventDefault();
  if (draggedBubble != null) {
    var destination = map.screenToGeo(evt.x, evt.y);
    draggedBubble.setPosition(destination);
    var strip = linkPolyline.getStrip();
    strip.removePoint(strip.getPointCount() - 1);
    strip.pushPoint(destination);
    map.addObject(linkPolyline);
    draggedBubble = null;
    linkPolyline = null;
  }
});

// Now use the map as required...
addInfoBubble(map);

它需要更多的开发来消除一些错误，但希望这会对其他人有所帮助

如何在 HERE 地图 Javascript API 中创建可拖动的信息气泡？

How to create a draggable infobubble in HERE Maps Javascript API?

javascript

here-api