VEMap.SetMapView 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.

Sets the map view to include all of the points, lines, or polygons specified in the provided array, or to the view defined by a VEMapViewSpecification Class object.

VEMap.SetMapView(object);

Parameters

Parameter Description

object

In 2D mode, an array of VELatLong Class points or a VELatLongRectangle Class object. In 3D mode, can also be a VEMapViewSpecification Class object. This object defines the location, altitude, pitch, and heading to use for the map view.

Remarks

The method is useful when you want a map to cover a known collection of points, but you are not sure what the center point is, or what zoom level is required to fit the entire region in your current map control.

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 center = new VELatLong(38.62504326121764, -90.18497586250308);
         var initView = new VEMapViewSpecification(center, 16, 1000, -90, 0);
         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetMapMode(VEMapMode.Mode2D);
            map.SetMapStyle(VEMapStyle.Aerial);
            map.SetMapView(initView);
         }   
         
         function ToggleMode()
         {
            var mode = map.GetMapMode();

            if (mode == VEMapMode.Mode2D)
            {
               map.SetMapMode(VEMapMode.Mode3D);
            }
            else if (mode == VEMapMode.Mode3D)
            {
               map.SetMapMode(VEMapMode.Mode2D);
            }
         }
         
         function SetMapStyle()
         {
            if (styleForm.styleType[0].checked)
            {
               var style = map.GetMapStyle();

               if (style == VEMapStyle.Aerial)
               {
                  alert("The Aerial style is already set.");
               }
               else
               {
                  map.SetMapStyle(VEMapStyle.Aerial);
                  alert("Map style has been set to Aerial.");
               }
            }
            else if (styleForm.styleType[1].checked)
            {
               var style = map.GetMapStyle();

               if (style == VEMapStyle.Birdseye)
               {
                  alert("The Birdseye style is already set.");
               }
               else
               {
                  map.SetMapStyle(VEMapStyle.Birdseye);
                  alert("Map style has been set to Birdseye.");
               }
            }
            else if (styleForm.styleType[2].checked)
            {
               var style = map.GetMapStyle();

               if (style == VEMapStyle.Road)
               {
                  alert("The Road style is already set.");
               }
               else
               {
                  map.SetMapStyle(VEMapStyle.Road);
                  alert("Map style has been set to Road.");
               }
            }
            else if (styleForm.styleType[3].checked)
            {
               var style = map.GetMapStyle();

               if (style == VEMapStyle.Hybrid)
               {
                  alert("The Hybrid style is already set.");
               }
               else
               {
                  map.SetMapStyle(VEMapStyle.Hybrid);
                  alert("Map style has been set to Hybrid.");
               }
            }
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      <INPUT id="btnToggle" type="button" value="Toggle Map Mode" name="btnToggle" 
         onclick="ToggleMode();">
      <form name="styleForm">
            <input id="aerial" type="radio" name="styleType" checked="checked" /> Aerial<br />
            <input id="birdseye" type="radio" name="styleType" /> Birdseye<br /> 
            <input id="road" type="radio" name="styleType" /> Road<br />
            <input id="hybrid" type="radio" name="styleType" /> Hybrid
      </form>
      <INPUT id="btnStyle" type="button" value="Set Selected Map Style" name="btnStyle" 
         onclick="SetMapStyle();">
      <div id="latlon"></div>
   </body>
</html>