none
problem with Pushpin events in Bing Maps Ajax7. RRS feed

  • Question

  • I am facing a problem with Pushpin events in Bing Maps Ajax7..Actually the same handler for an event is being called whether the event is "dblclick","click","dragend","dragstart". I have specified different handlers for these events, but the first handler that is specfied for one of these events is being called. In short,all the events are behaving the same on the Bing Map..Please help
    Wednesday, September 12, 2012 9:24 AM

Answers

  • What you can do is use the drag start event and capture the location of the pushpin and store it in a variable. Then in the drag end event check to see if this location of the pushpin has changed. If it hasn't then ignore the drag end event, if it has then run your additional drag end code.

    http://rbrundritt.wordpress.com

    • Marked as answer by anweshasharma Thursday, September 13, 2012 11:56 AM
    Wednesday, September 12, 2012 6:59 PM

All replies

  • The drag start event starts as soon as you mouse down on the pushpin. The drag end event gets fired as soon as you mouse up on the pushpin. The click event occurs after you mouse up and the double click event requires you to click the pushpin twice fast. This is all behaving as it should be. Here is a little test app:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
       <head>
          <title></title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
          <script type="text/javascript">
             var map = null;
             var noPins = true;      
             function GetMap()
             {
                // Initialize the map
                map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                             {credentials:"Bing Maps Key"}); 
                var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0,0), {draggable : true});
    			map.entities.push(pin);
    			
                Microsoft.Maps.Events.addHandler(pin, 'click', function(){
    				ShowMessage('Click Event');
    			});
    			Microsoft.Maps.Events.addHandler(pin, 'dblclick', function(){
    				ShowMessage('Double Click Event');
    			});
    			
    			Microsoft.Maps.Events.addHandler(pin, 'dragstart', function(){
    				ShowMessage('Drag Start Event');
    			});
    			
    			Microsoft.Maps.Events.addHandler(pin, 'dragend', function(){
    				ShowMessage('Drag End Event');
    			});
             }
    		 
    		 function ShowMessage(msg){
    			document.getElementById('output').innerHTML += msg + '<br/>';
    		 }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div><br/>
    	  <div id='output'></div>
       </body>
    </html>


    http://rbrundritt.wordpress.com

    • Proposed as answer by Ricky_Brundritt Wednesday, September 12, 2012 11:09 AM
    Wednesday, September 12, 2012 11:08 AM
  • Very useful Richard!! 

    Thanks a ton :)

    Actually , i want to have the following events on a pushpin:: 

    1) a drag end event where the handler shows the corresponding pin's details.

    2) and a double click event on the pushpin where the handler is used to set the pin as a start pin which i will be used for create the route between the pins

    How do i go about "not calling" the "drag end" event handler when i double click on a pin (as u said that the drag end handler will be called first when we click/double click on a pushpin.

    I am fine with calling the "drag end" event handler twice when i double click on a pin, but in my case the double click event's handler is not getting called at all.

    To make things clear, I will share some code:

       function GeocodeCallback(result) {
                alert("Found location: " + result.resourceSets[0].resources[0].name);
                if (result &&
                       result.resourceSets &&
                       result.resourceSets.length > 0 &&
                       result.resourceSets[0].resources &&
                       result.resourceSets[0].resources.length > 0) {
                    // Set the map view using the returned bounding box
                    var bbox = result.resourceSets[0].resources[0].bbox;
                    var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
                    map.setView({ bounds: viewBoundaries });
                    // Add a pushpin at the found location
                    var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);

                    //Add the default Infobox

                    //Microsoft.Maps.Events.addHandler(map, 'rightclick', addDefaultInfobox);
      

                    //Data layer for entity collection
                    //dataLayer = new Microsoft.Maps.EntityCollection();
                    //map.entities.push(dataLayer);

                    //Make the pushpin draggable
                    var pushpinOptions = { draggable: true };
                    pushpin = new Microsoft.Maps.Pushpin(location, pushpinOptions);
                    infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });

                    //Call Event Handler "startDragDetails" when pushpin is dragged for showing pushpin's location
                   pushpindragstart = Microsoft.Maps.Events.addHandler(pushpin, 'dragend', startDragDetails); - gets called correctly
                
                    pushpinRightClick = Microsoft.Maps.Events.addHandler(pushpin, 'rightclick', removePin);
                    pushpinDoubleClick =  Microsoft.Maps.Events.addHandler(pushpin, 'dblclick', setStartPin); - does not get called at all
                 

                    dataLayer.push(pushpin);


                    //Create the Trip Location record
                    createTripLocation(location);
                }
            }

    Please let me know what could be the problem. 


    anwesha

    Wednesday, September 12, 2012 12:12 PM
  • What you can do is use the drag start event and capture the location of the pushpin and store it in a variable. Then in the drag end event check to see if this location of the pushpin has changed. If it hasn't then ignore the drag end event, if it has then run your additional drag end code.

    http://rbrundritt.wordpress.com

    • Marked as answer by anweshasharma Thursday, September 13, 2012 11:56 AM
    Wednesday, September 12, 2012 6:59 PM