VEMap.DetachEvent Method

  • Article

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.

Detaches the specified map control event so that it no longer calls the specified function.

VEMap.DetachEvent(event, function);

Parameters

Parameter Description

event

The name of the map control event that generates the call.

function

The function that was specified to run when the event fired.

Return Value

Remarks

For a list of map control events, see VEMap Events.

Because a single event can be attached to multiple functions, you must specify the event and function names when detaching.

Example

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

See Also

Reference

VEMap.AttachEvent Method