文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript bing map中的可拖动和可单击图钉

问javascript bing map中的可拖动和可单击图钉
EN

Stack Overflow用户

提问于 2012-02-14 19:15:04

回答 2查看 2.3K关注 0票数 0

有没有人能用javascript把可拖拽的图钉放到bing api中？它甚至可以通过api (javascript)实现该功能吗？

javascript

bing-maps

pins

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-02-14 22:44:35

答案就在这里！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

Stack Overflow用户

发布于 2018-01-22 18:53:52

另一种具有可拖拽图钉和可拖拽信息框的解决方案

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9275894

复制

相似问题

问javascript bing map中的可拖动和可单击图钉
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript bing map中的可拖动和可单击图钉EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript bing map中的可拖动和可单击图钉
EN