CODEWITHSUNDEEP
javascriptbing-maps
test
test

Reputation: 2608

Ajax Bing Maps version 7 - move and delete push pin - beginner's tutorial

I am currently learning about these maps. Now I would like to create a method which updates my push pin if I already have one.

a. I tried to use setLocation(newLocation) but unfortunately, when I did this, my client side code wasn't even reached (I'm thinking that the code syntax is incorrect, yet no error was given on chrome)

b. I then tried to learn how to delete it and create another one, yet I cannot find any resources from http://msdn.microsoft.com/en-us/library/gg427610.aspx - maybe I am not searching well enough.

Can anyone provide me with some guide on how to move a push pin and how to delete one? Thank you all very very much

var loc = new Microsoft.Maps.Location(lat, lon);

var pin = new Microsoft.Maps.Pushpin(loc);

Edit: partial answer

Removing a push pin:

if (pin != null)
{
    map.entities.remove(pin)
}

Upvotes: 4

Views: 8125

Answers (2)

Harsha Vardhini
Harsha Vardhini

Reputation: 732

The following function can remove all the pushpins from the map:

//remove all the pushpins
function deletePushpin()
{
  for(var i=map.entities.getLength()-1;i>=0;i--) 
  {
      var pushpin= map.entities.get(i); 
      if (pushpin instanceof Microsoft.Maps.Pushpin) { 
        map.entities.remove(pushpin);  
      }
   } 
}

Upvotes: 3

Bojin Li
Bojin Li

Reputation: 5789

To move a pushpin, setLocation() is indeed the function you need to use. Are you trying to call setLocation from an event handler on the map? If that's the case, it's possible that the event handler wasn't set up properly so it is never called. However, if you already have defined a pushpin(with a variable name myPushpin) and inserted it into the map, then executing the follow code will move it:

// Move pushpin to "38.0", "-97.0"
var loc = new Microsoft.Maps.Location(38.0, -97.0);
myPushpin.setLocation(loc);

To see this in action, head over to the Ajax Bing Maps v7 interactive SDK, modify the code in blue on the lower center of the screen by putting in different coordinates, hit the Run button and see the pushpin move.

To delete a pushpin that has been added to the map, you need to remove it from the EntityCollection from which it was added to. For example, if you simply inserted the Pushpin into yourmap.entities, this is how you remove it:

var index = yourmap.entities.indexOf(myPushpin);
if (index != -1) {
    yourmap.entities.removeAt(index);
}

Or you can just remove it directly without using an index:

yourmap.entities.remove(myPushpin);

UPDATE: To delete a pushpin when the user clicks on it, you essentially have to first identify the pushpin that was clicked in the click event handler. The pushpin can be obtained from the target Property of the MouseEventArgs Object that is passed into your click handler:

Microsoft.Maps.Events.addHandler(pushpin, 'click', function (mouseEvent) {
    var pushPinThatWasClicked = mouseEvent.target;
    // Do whatever you want with pushPinThatWasClicked 
});

Upvotes: 4

Related Questions