CODEWITHSUNDEEP
event-handlingbing-maps
Someone There
Someone There

Reputation: 41

handle onchangeview event for Bing maps

I'm trying to handle the onchangeview event for bing maps

In the js intialize method I have the following code:

map = new Microsoft.Maps.Map(document.getElementById("mapviewer"), {
    credentials: bingMapsKey, 
    center : new Microsoft.Maps.Location(42.3508, -71.0717),
    zoom: 12
    });
//Microsoft.Maps.Events.addHandler(map, "onchangeview", handleChangeView);
Microsoft.Maps.Events.addHandler(map, "onclick", handleChangeView);
mapviewer.attachEvent("onchangeview", handleChangeView);

I also have this function

function handleChangeView(e) {

}

this function is never called, and I am not sure why as the handler is set up properly.

I also don't understand the difference between the following 2 lines and when I should attach an event one way or the other 

Microsoft.Maps.Events.addHandler(map, "onclick", handleChangeView);
mapviewer.attachEvent("onchangeview", handleChangeView);

Any ideas?

Upvotes: 4

Views: 6089

Answers (2)

Chris Rasys
Chris Rasys

Reputation: 1335

You can also define the new event at the same time that you add it:

Microsoft.Maps.Events.addHandler(map, "click", function(args) {
    ...
});

The value of args will be dependent on the object and the event you're using. In this case it's a MouseEventArgs object (http://msdn.microsoft.com/en-us/library/gg406731.aspx).

Upvotes: 1

wildpeaks
wildpeaks

Reputation: 7392

Many events were renamed in 7, I think you want to use "click" instead of "onclick" and "viewchangeend" instead of "onchangeview".

Depending on what you need it for, you may prefer events "viewchangestart", "viewchange" or "targetviewchanged" however.

Also, you should definitely use "Microsoft.Maps.Events.addHandler" to setup the listeners with 7, all events use the Events object now.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init()">

<div id="map" style="position: relative; width: 800px; height: 350px;"></div>   


<script type="text/javascript">

/**
 * Map click event handler.
 */
function onclick(e){
    var map = this.target; //reference to the Map object from which it came
    //...
    var x = e.getX(); // horizontal position of the click
    var y = e.getY(); // vertical position of the click
    //...
    console.log('The map has been clicked');
}

/**
 * View change event handler.
 */
function onview(){
    var map = this.target; //reference to the Map object from which it came
    //...
    console.log('The view has changed');
}

/**
 * Load the map and setup event listeners
 */
function init(){
    var map = new Microsoft.Maps.Map(
        document.getElementById("map"),
        {
            credentials: "YOUR-BING-KEY",
            mapTypeId: Microsoft.Maps.MapTypeId.road
        }
    );
    Microsoft.Maps.Events.addHandler(map, "click", onclick);
    Microsoft.Maps.Events.addHandler(map, "viewchangeend", onview);
}

</script>


</body>
</html>

List of events (at the bottom of the page): http://msdn.microsoft.com/en-us/library/gg427609.aspx

Upvotes: 6

Related Questions