Google Maps API--3. Move the map

1. Method

(1) map. setcenter (center, zoom ?, Type ?)

This method jumps directly to the center, where the first map is not moved smoothly. The moveend and dragged events are triggered.

Map. setcenter (New glatlng (39.990168, 116.295304), 10 );

 

(2) map. Panto (center)

This method moves the map to the specified center position in the form of a move painting. This method does not trigger the moveend and dragged events.

 

(3) map. panby (distance)

The gsize, new gsize (width, height) parameter, the unit of width/height is PX, the Northwest is positive, and the Southeast is negative
This method is based on the sliding effect and does not trigger the oveend and dragged events.

Map. panby (New gsize (50, 90); // move 50 to the west and 90 to the North

Map. panby (New gsize (-50,-90); // move 50 to the east and 90 to the south.

 

(4) map. pandirection (dx, Dy)
This method starts to translate the animation in the specified direction. The Movement amplitude is half of the map width. + 1 is the right or downward direction, and-1 is the left or upward direction.
Map. pandirection (dx, Dy );

2.Source code

Source code

 1   <  Html  > 
 2       <  Head > 
 3           <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   /> 
 4           <  Script
  5   SRC = "Http://ditu.google.com/maps? File = API & amp; V = 2 & amp; Key = ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA & HL = ZH-CN"  
  6   Type  = "Text/JavaScript"  > </  Script  > 
 7  
 8           <  Script  Type = "Text/JavaScript"  >  
  9   VaR  Map;
  10   Function  Load (){
  11   //  Check the compatibility of the browser.  
 12   If  (Gbrowseriscompatible ()){
  13   //  Load Map  
  14   Map  =  New  Gmap2 (document. getelementbyid ( "  Map_canvas  "  ));
  15   //  Set the central coordinates of the map.  
  16   Map. setcenter (  New  Glatlng ( 39.990168  ,  116.295304  ),  10  );
  17   //  Allows users to move and scale a map  
  18   Map. addcontrol ( New  Gsmallmapcontrol ());
  19   //  Allows users to switch between map types  
  20   Map. addcontrol (  New  Gmaptypecontrol ());
  21   }
 22   }
  23   
  24   Function  Mapmovebydirection (dx, Dy ){
  25   
  26   Map. pandirection (dx, Dy );
  27  }
  28   
  29   Function  Mapmovebypan (dx, Dy ){
  30   Map. panby (  New  Gsize (  100  , 50  ));  //  Move 100 pixels to the west and 50 pixels to the North  
  31   }
  32   </  Script  > 
 33       </  Head > 
 34       <  Body  Onload  = "Load ()"  OnUnload  = "Gunload ()"  > 
 35           <  Input  Type  = "Button"  Value  = "Pandirection )" Onclick  = "Mapmovebydirection (0.01,-0.03 )"  > 
 36           <  Input  Type  = "Button"  Value  = "Panby )"  Onclick  = "Mapmovebypan ()"  > 
 37           <! --  Map canvas --> 
 38           <  Div  ID  = "Map_canvas"  Style  = "Width: 640px; Height: 480px"  > </  Div  > 
 39       </  Body  > 
 40  </  Html  > 

3. Results