1.方法
(1)map.setCenter(center,zoom?,type?)
该方法直接跳转到center为中心处先是地图,不会平滑地移动地图。并会触发moveend和dragged事件
map.setCenter(new GLatLng(39.990168,116.295304),10);
(2)map.panTo(center)
此方法以平移动画形式将地图移动到指定的中心位置,此方法不触发moveend和dragged事件
(3)map.panBy(distance)
参数GSize,new GSize(width,height),width/height的单位为px,西北为正,东南为负
该方法由滑动的效果,并不触发oveend和dragged事件
map.PanBy(new GSize(50,90));//向西移动50,北90
map.panBy(new GSize(-50,-90));//向东移动50,向南90
(4)map.panDirection(dx,dy)
该方法在制定方向上开始平移动画,移动幅度为地图宽度的一半,+1是向右或向下方向,-1是向左或向上方向
map.panDirection(dx, dy);
2.源代码
Source Code
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
4 <script
5 src="http://ditu.google.com/maps?file=api&v=2&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 //检查浏览器的兼容性.
12 if (GBrowserIsCompatible()){
13 //加载地图
14 map=new GMap2(document.getElementById("map_canvas"));
15 //设置地图的中心坐标.
16 map.setCenter(new GLatLng(39.990168,116.295304),10);
17 //允许用户移动和缩放地图
18 map.addControl(new GSmallMapControl());
19 //允许用户在地图类型之间切换
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));//向西移动100像素,向北移动50像素
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 <!-- 地图画板 -->
38 <div id="map_canvas" style="640px; height:480px"></div>
39 </body>
40 </html>
3.效果