Google Maps API - 放置动画

Question

是否可以在20秒内将地图中心从一个位置移动到另一个位置？如果是这样，我该如何做到这一点？

Answer 1

google.maps.Map#panTo方法将使用动画更改中心。

将地图的中心更改为给定的LatLng。如果变化小于地图的宽度和高度，则过渡将平滑动画。

但是，您无法使用map＃panTo方法控制动画延迟/间隔。我认为你可以破解使用window.setTimeout()定制延迟：

结帐从圣弗朗西斯飞往拉斯维加斯@http://jsfiddle.net/stevejansen/g6NSS/

它并不完美的定制5秒动画，但是，它似乎在Chrome中工作得相当好，我。

function initialize() { 
    var origin = new google.maps.LatLng(37.774, -122.419), 
     dest = new google.maps.LatLng(36.114, -115.172), 
     canvas = document.getElementById("map-canvas"), 
     options = { 
      center: origin, 
      zoom: 8, 
      mapTypeControl: false 
     }; 

    google.maps.visualRefresh = true; 
    var map = new google.maps.Map(canvas, options); 

    google.maps.event.addDomListenerOnce(map, 'idle', function() { 
     panTo(map, dest, 5000); 
    }); 
} 


function panTo(map, dest, delay) { 
    var GOOGLE_PAN_DELAY = 30, 
     /* the native Google Maps milliseconds */ 
     cycles = delay/GOOGLE_PAN_DELAY, 
     interval = delay/cycles, 
     origin = map.getCenter(), 
     waypoints = [], 
     temp, 
     lat, 
     lng; 

    // compute the change in lat/long, and divide across N cycles 
    lat = (dest.lat() - origin.lat())/cycles; 
    lng = (dest.lng() - origin.lng())/cycles; 

    // starting at origin, add N-1 intermediate waypoints that are equidistance apart 
    temp = origin; 
    for (var i = 0; i < cycles - 1; i++) { 
     temp = new google.maps.LatLng(temp.lat() + lat, temp.lng() + lng); 
     waypoints.push(temp); 
    } 
    // make sure the last waypoint is the actual dest 
    waypoints.push(dest); 

    function pan() { 
     var waypoint; 

     if (waypoints.length === 0) return; 

     waypoint = waypoints.shift(); 

     map.panTo(waypoint); 

     window.setTimeout(pan, interval); 
    } 

    pan(); 
} 


google.maps.event.addDomListener(window, 'load', initialize); 

Answer 2

感谢Steve Jansen为您的panTo功能。我稍微修改了它以提供一个易于使用的运动。我将它包含在这里以防有人发现它有用。

function panTo(map, dest, delay) { 
      var GOOGLE_PAN_DELAY = 30, 
      /* the native Google Maps milliseconds */ 
       cycles = delay/GOOGLE_PAN_DELAY, 
       interval = delay/cycles, 
       origin = map.getCenter(), 
       waypoints = [], 
       temp, 
       step, 
       lat, 
       lng; 

      // compute the change in lat/long, and divide across N cycles 
      lat = (dest.lat() - origin.lat())/cycles; 
      lng = (dest.lng() - origin.lng())/cycles; 

      // starting at origin, add N-1 intermediate waypoints that are equidistance apart 
      temp = origin; 
      for (var i = 0; i < cycles - 1; i++) { 
       step = cycles/((cycles - i)*(cycles - i)); 
       temp = new google.maps.LatLng(temp.lat() + (lat * step), temp.lng() + (lng * step)); 
       waypoints.push(temp); 
      } 
      // make sure the last waypoint is the actual dest 
      waypoints.push(dest); 

      function pan() { 
       var waypoint; 

       if (waypoints.length === 0) return; 

       waypoint = waypoints.shift(); 

       map.panTo(waypoint); 

       window.setTimeout(pan, interval); 
      } 

      pan(); 
     }