zoukankan      html  css  js  c++  java
  • Google Maps API——3.Move the map

    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&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 //检查浏览器的兼容性.
    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.效果

  • 相关阅读:
    bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)
    CentOS 7下MySQL安装配置
    CentOS 7下设置DNS服务器
    MySQL Table is marked as crashed 解决方法
    supervisor使用
    Linux更改服务器Hostname
    在Linux中让打印带颜色的字
    php安装gearman扩展实现异步分步式任务
    GitLab的Gravatar头像服务不可用
    Nginx + tornado + supervisor部署
  • 原文地址:https://www.cnblogs.com/January/p/2270190.html
Copyright © 2011-2022 走看看