Draggable AND clickable pushpin in javascript bing map

StackOverflow https://stackoverflow.com/questions/9275894

  •  29-04-2021
  •  | 
  •  

题

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

有帮助吗？

解决方案

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

其他提示

Yet 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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top