javascript - 使谷歌地图焦点跟随特定位置

Question

我从数据库中提取了多个按时间顺序排列的位置 - 我将这些位置放入地图并制作一条连接它们的折线。

我想知道如何执行以下操作：我想在页面上的某处放置一个“播放按钮”，该按钮最终开始将地图窗口的焦点沿着折线的边缘从最旧的位置移动到最新的位置。最好的选择是如果转换是连续的（不是从一个位置跳到另一个位置）。

我对 Google Maps API 没有太多经验，但我想这很容易做到。（setTimeout也许？）

谢谢。

Answer 1

沿多段线为标记设置动画的一个示例是：

http://www.geocodezip.com/v3_animate_marker_xml.html

代码移植自Mike Williams 的 v2 教程。

//=============== animation functions ======================
      function updatePoly(d) {
        // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
        if (poly2.getPath().getLength() > 20) {
          poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
          // map.addOverlay(poly2)
        }

        if (polyline.GetIndexAtDistance(d) < lastVertex+2) {
           if (poly2.getPath().getLength()>1) {
             poly2.getPath().removeAt(poly2.getPath().getLength()-1)
           }
           poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d));
        } else {
          poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.getPath().getAt(polyline.getPath().getLength()-1));
        }
      }


      function animate(d) {
        if (d>eol) {
          var endlocation = polyline.getPath().getAt(polyline.getPath().getLength()-1);
          map.panTo(endlocation);
          marker.setPosition(endlocation);
          return;
        }
        var p = polyline.GetPointAtDistance(d);
        map.panTo(p);
        marker.setPosition(p);
        updatePoly(d);
        timerHandle = setTimeout("animate("+(d+step)+")", tick);
      }


function startAnimation() {
        if (timerHandle) clearInterval(timerHandle);
        eol=polyline.Distance();
        map.setCenter(polyline.getPath().getAt(0));
        if (marker) { 
           marker.setMap(null);
           delete marker;
           marker = null;
        }
        if (!marker) marker = new google.maps.Marker({location:polyline.getPath().getAt(0), map:map} /* ,{icon:car} */);
        poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10});
        setTimeout("animate(50)",2000);  // Allow time for the initial map display
}


//=============== ~animation functions =====================