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

When in 2D mode, moves the map the specified amount.


VEMap.Pan(deltaX, deltaY);

Parameters

Parameter Description

deltaX

The amount to move the map horizontally, in pixels

deltaY

The amount to move the map vertically, in pixels

The Pan method only applies to 2D mode maps. If you are working with maps in 3D mode, use the VEMap.StartContinuousPan Method and VEMap.EndContinuousPan Method.

If the deltaX parameter is greater than the map view width or the deltaY parameter is greater than the map view height, then a jump pan occurs instead of a gradual pan. If a jump pan occurs that causes the map to pan past one of the world map bounds, then the map will zoom to level 1 to show the entire world map.

<!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;
 
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.SetZoomLevel(9);
         }  
     
         function PanXY()
         {
            if ((document.getElementById('txtX').value != "" && document.getElementById('txtY').value != "") && (!isNaN(document.getElementById('txtX').value) && !isNaN(document.getElementById('txtY').value)))
            {
               map.Pan(document.getElementById('txtX').value, document.getElementById('txtY').value);
            }
            else
            {
               alert("Please enter a valid numeric value.");
            }
         } 
     
         function PanLL()
         {
            if ((document.getElementById('txtLat').value != "" && document.getElementById('txtLong').value != "") && (!isNaN(document.getElementById('txtLat').value) && !isNaN(document.getElementById('txtLong').value)))
            {
               var latLong = new VELatLong(document.getElementById('txtLat').value, document.getElementById('txtLong').value);
               map.PanToLatLong(latLong);
            }
            else
            {
               alert("Please enter a valid Latitude or Longitude value.");
            }
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family: Arial">
      <div id='myMap' style="position: relative; width: 400px; height: 400px;">
      </div>
      Pixels X:
      <input id="txtX" style="width: 50px" value="100" />&nbsp;&nbsp;|&nbsp;&nbsp; Pixels
      Y:
      <input id="txtY" style="width: 50px" value="100" />&nbsp;&nbsp;
      <input id="btnPanXY" type="button" value="Pan to X/Y" name="btnPanXY" onclick="PanXY()" />
      <br />
      Lat:
      <input id="txtLat" value="41.677014822032184" />&nbsp;&nbsp;|&nbsp;&nbsp; Long:
      <input id="txtLong" value="-83.5400390625" />&nbsp;&nbsp;
      <input id="btnPanLL" type="button" value="Pan to Lat/Long" name="btnPanLL" onclick="PanLL()" />
   </body>
</html>

Show: