Google Maps API——3.Move the map

来源：互联网发布：log4j如何打印执行SQL 编辑：程序博客网时间：2024/06/05 15:16

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.源代码

<html>     <head>         <meta http-equiv="content-type" content="text/html; charset=utf-8" />         <script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"             type="text/javascript"></script>          <script type="text/javascript"> var map; function load(){ //检查浏览器的兼容性. if (GBrowserIsCompatible()){ //加载地图                     map=new GMap2(document.getElementById("map_canvas"));                     //设置地图的中心坐标.                     map.setCenter(new GLatLng(39.990168,116.295304),10); //允许用户移动和缩放地图                     map.addControl(new GSmallMapControl());   //允许用户在地图类型之间切换                     map.addControl(new GMapTypeControl());                  }             }              function mapMoveByDirection(dx,dy) {                                  map.panDirection(dx, dy);             }                        function mapMoveByPan(dx,dy) {              map.panBy(new GSize(100,50));//向西移动100像素，向北移动50像素             }                      </script>     </head>     <body onload="load()" onunload="GUnload()">         <input type="button" value="向上移动(panDirection)" onClick="mapMoveByDirection(0.01,-0.03)">         <input type="button" value="向西北移动(panBy)" onClick="mapMoveByPan()">         <!-- 地图画板 -->         <div id="map_canvas" style="width:640px; height:480px"></div>     </body> </html>

3.效果

分类: JavaScript, Google Maps API