Draggable AND clickable pushpin in javascript bing map

问题

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>

来源：https://stackoverflow.com/questions/9275894/draggable-and-clickable-pushpin-in-javascript-bing-map

标签

javascript

bing-maps

pins