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(); 
     }