VEMap.AttachEvent Method
You are not viewing the latest version of the AJAX control. Bing Maps AJAX V7 is the recommended JavaScript control for Bing Maps. If you need this documentation, it is available in as a CHM or PDF download.
Attaches a Map Control event to a specified function.
VEMap.AttachEvent(event, function);
Parameters
| Parameter | Description |
|---|---|
event |
The name of the Map Control event that generates the call. |
function |
The function to run when the event fires. It can be either the name of a function or the function itself. |
Return Value
Remarks
For a list of Map Control events, see VEMap Events.
When the event fires, you can specify either the name of the function to call or the function itself. The following example shows each option.
For the keyboard and mouse events, the custom function is executed before the default action is executed. If the custom function returns false, the default action is executed. If the custom function returns true, the default action is not executed. For example, if you have attached the onLeftMouseDoubleClick event, then your custom function is executed first. If it returns false, the default map behavior, which is to zoom-in, is executed. If it returns true, the zoom-in behavior is disabled.
You can also perform actions based on the type of object associated with the event. The VEShape Class object is normally the object associated with an event.
Note
If you specify the entire function to attach, as opposed to just the function name, it will be impossible to detach it later.
See the VEMap Events topic for more information.
Examples
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript">
var map = null;
var shape = null;
// Latitude and longitude values for the approximate center of Boston, MA
var lat = 42.3595586931348;
var lon = -71.06094360351562;
// Point values to draw an octagon shape
var points=[new VELatLong(lat,lon-0.15),
new VELatLong(lat+0.1,lon-0.05),
new VELatLong(lat+0.1,lon+0.05),
new VELatLong(lat,lon+0.15),
new VELatLong(lat-0.1,lon+0.05),
new VELatLong(lat-0.1,lon-0.05)];
// Custom HTML for pushpin popup (This is NEW in V5!)
var description =
"<div>" +
"<h4>This is the center of Boston, MA</h4>" +
"<p>Latitude = 42.3595586931348.</p>" +
"<p>Longitude = -71.06094360351562.</p>" +
"</div>";
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(lat,lon));
map.SetZoomLevel(10);
document.getElementById('banner').innerHTML = document.title;
}
function drawPolygon()
{
map.DeleteAllShapes();
try
{
var shape = new VEShape(VEShapeType.Polygon,points);
shape.SetLineWidth(2);
shape.SetTitle("<div id='customTitle'><h3>Custom Title</h3></div>");
shape.SetDescription(description);
shape.SetPoints(points);
shape.ShowIcon();
map.AddShape(shape);
document.getElementById('label').innerHTML =
"<p>Hover over the polygon for info about this shape!</p>"
// The onmouseover event which calls the shapeInfo function
map.AttachEvent("onmouseover", shapeInfo);
// The onmouseout event that calls the shapeInfo function to clear the info element
map.AttachEvent("onmouseout", shapeInfo);
// The onclick event to call the callPopUp function
map.AttachEvent("onclick", callPopUp);
}
// This example features handling exceptions with the VEException object
catch(VEException)
{
document.getElementById('label').innerText =
VEException.message +
" : " +
VEException.name +
" : " +
VEException.source;
}
}
function detach()
{
// Detach all events
map.DetachEvent("onmouseover", shapeInfo);
map.DetachEvent("onmouseout", shapeInfo);
map.DetachEvent("onclick", callPopUp);
}
function shapeInfo(e)
{
if(e.elementID != null)
{
document.getElementById("label").innerText =
"Event: " +
e.eventName +
"; Shape ID: " +
e.elementID +
"\n\nClick on the polygon for additional information.";
}
else
{
document.getElementById("label").innerText = "";
}
}
function callPopUp(e)
{
if(e.elementID != null)
{
alert(
"You can now call other functions via events \n" +
"This event was " +
e.eventName);
}
else
{
return false;
}
}
</script>
</head>
<body onload="GetMap();">
<div id="banner" style="background-color: #CCCCFF; border: thin blue dashed; border-bottom: 0px;
font-family: Helvetica, sans-serif; font-style: italic; font-size: medium; width: 400px">
</div>
<div id="myMap" style="position: relative; width: 400px; height: 400px; border: thin blue groove">
</div>
<div id="buttons" style="position: static; left: 11px; top: 401px">
<input name="Button1" type="button"
value="Click to Draw Shape and Attach Events" onclick="drawPolygon();" />
<input name="Button2" type="button" value="Click to Detach Events" onclick="detach();" />
<div id="label" style="position: relative; left: 0px; top: 0px; width: 399px;">
<label id="Label1">
</label>
</div>
</div>
</body>
</html>