问题:

Does anyone get the way to put draggable pushpins through the bing api using javascript? Its is even possible to have that functionality through the api (javascript)?

回答1:

The answer is there! http://www.bingmapsportal.com/ISDK/AjaxV7#Pushpins13

var pushpinOptions = {icon: 'poi_custom.png', draggable:true};  var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), pushpinOptions);  pushpindragend= Microsoft.Maps.Events.addHandler(pushpin, 'dragend', enddragDetails);   map.entities.push(pushpin);

回答2:

Yet an another solution with draggable pushpin and draggable infobox

<!DOCTYPE html> <html> <head>     <title>pushpinDragEventsHTML</title>     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>     <style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style> </head> <body>     <div id='printoutPanel'></div>      <div id='myMap' style='width: 100vw; height: 100vh;'></div>     <script type='text/javascript'>           function loadMapScenario() {         var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});         var center   = map.getCenter();         var Events   = Microsoft.Maps.Events;         var Location = Microsoft.Maps.Location;         var Pushpin  = Microsoft.Maps.Pushpin;         var pins = [                 new Pushpin(new Location(center.latitude, center.longitude), { color: '#00F', draggable: true }),             ];               // Setting up the pin_coordinates printout panel             document.getElementById('printoutPanel').innerHTML = '<div id="pushpinDragEnd">' + center +'</div>';                    var infobox = new Microsoft.Maps.Infobox(                 center, {                  title: 'Map Center',                 description: 'Initail Lable' });                 infobox.setMap(map);               map.entities.push(pins);              // Binding the events for the pin             Events.addHandler(pins[0], 'dragend', function () {  displayPinCoordinates('pushpinDragEnd'); });               function displayPinCoordinates(id) {                     infobox.setMap(null); // delete infobox                     var pin_location =pins[0].getLocation();                      document.getElementById(id).innerHTML =pin_location;   // display pin coordinates in printout panel                      // display dragged infobox                     infobox = new Microsoft.Maps.Infobox(                         pin_location, {                          title: 'Pin Center',                         description: 'Dragable Lable' });                         infobox.setMap(map);             }          }       </script>       <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=yourBingMapsKey&callback=loadMapScenario' async defer></script> </body> </html>

转载请标明出处:Draggable AND clickable pushpin in javascript bing map

文章来源: Draggable AND clickable pushpin in javascript bing map

标签

draggable

maps