MSDN Library

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

Specifies whether to zoom to the center of the screen or to the cursor position on the screen.


VEMap.SetMouseWheelZoomToCenter(zoomToCenter);

Parameters

Parameter Description

zoomToCenter

A Boolean value specifying whether to zoom to the center of the screen or to the cursor position. If true, the map control zooms to the center of the screen; if false, the map control zooms to the cursor position on the screen.

By default the map control zooms to the center of the screen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>

      <script type="text/javascript">
         var map = null;
         var latLong = null;
         var zoomLevel = 3;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetZoomLevel(zoomLevel);

            // zoom to cursor and center
            map.SetMouseWheelZoomToCenter(false);

            document.getElementById('txtZoom').value = zoomLevel;
            map.AttachEvent("onclick", GetLatLong);
            latLong = map.GetCenter();
            divInfo.innerHTML = latLong;
         }  
     
         function GetLatLong(e)
         {
            //Get the pixel coordinates from the click event, convert to LatLong value
            var x = e.mapX;
            var y = e.mapY;
            pixel = new VEPixel(x, y);
            latLong = map.PixelToLatLong(pixel);
            divInfo.innerHTML = latLong;
         }
     
         function SetCenterAndZoom()
         {   
            map.SetCenterAndZoom(latLong, zoomLevel);
         }
     
         function SetCenter()
         {
            map.SetCenter(latLong);
         }
     
         function SetZoom()
         {
            map.SetZoomLevel(zoomLevel);
         }
     
         function ZoomIn()
         {
            //Increase zoom level by a factor of 1
            map.ZoomIn();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ZoomOut()
         {
            //Decrease zoom level by a factor of 1
            map.ZoomOut();
            document.getElementById('txtZoom').value = map.GetZoomLevel();
         }
     
         function ValidateEntry()
         {
           //Check to make sure zoom level is within range
           if (document.getElementById('txtZoom').value > 0 && document.getElementById('txtZoom').value <= 19)
           {
              zoomLevel = document.getElementById('txtZoom').value;
           }
           else
           {
              alert("Enter a value between 1 and 19.");
           }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
      Click the map to select a center point.<br />
      <div id="divInfo">&nbsp;<br /></div>
      Zoom Level: <input id="txtZoom" type="text" value="" onchange="ValidateEntry()"/><br />
      <input id="btnSetCZ" type="button" value="Set Center and Zoom" onclick="SetCenterAndZoom()"><br />
      <input id="btnSetCenter" type="button" value="Set Center" onclick="SetCenter()"><br />
      <input id="btnSetZoom" type="button" value="Set Zoom" onclick="SetZoom()"><br />
      <input id="btnZoomIn" type="button" value="Zoom in by 1" onclick="ZoomIn()">
      <input id="btnZoomOut" type="button" value="Zoom out by 1" onclick="ZoomOut()">
   </body>
</html>

Show:
© 2016 Microsoft