如何在HERE Maps Javascript API中創建可拖動的infobubble？

Question

是否可以在HERE Maps Javascript API中創建可拖動的infobubble？

我已經能夠從文檔中的示例引腳點擊打開信息。但是我找不到任何有關能夠拖拽生成的信息的信息。

Answer 1

可愛的人在這裏幫了我

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

它需要更多的發展，以消除一些錯誤，但希望這會幫助別人

Answer 2

這裏的地圖提供了一個在API瀏覽器中的例子，看一看。

Draggable Marker Example