使Google地图专注于特定位置 [英] Make Google Map focus follow specific locations

问题描述

我从按时间顺序排列的数据库中取得了多个地点 - 我将这些地点放入地图并制作连接它们的多段线。

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

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

谢谢。

解决方案

动画沿折线标记的一个示例是：

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

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

  // ===============动画功能============ ========== 
 function updatePoly（d）{
 //每隔20个顶点产生一个新的折线，因为更新100顶点的poly太慢了
 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）） ; 
 
 
 
 
函数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）; 
 
 
 
函数startAnimation（）{
 if（timerHandle）clearInterval（timerHandle）; 
 eol = polyline.Distance（）; 
 map.setCenter（polyline.getPath（）。getAt（0））; 
 if（marker）{
 marker.setMap（null）; 
删除标记; 
 marker = null; $！
 $ b 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）; //允许时间显示初始地图
} 
 
 
 // ===============〜动画功能==== ================= 
  

I have multiple locations pulled from DB ordered chronologically - I put the locations into the map and make a polyline connecting them.

I would like to know how to do the following: I want to put a "Play button" somewhere on the page which eventually starts moving the focus of the Map window along the edges of the polyline from the oldest location to the latest one. The best option would be if the transition is sequential (not jumping from one location to the other).

I don't have much of experience with Google Maps API, but I suppose this is really easy to do. (with setTimeout maybe?)

Thanks.

解决方案

One example of animating a marker along a polyline is:

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

Code ported from Mike Williams' v2 tutorial.

//=============== 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 =====================

这篇关于使Google地图专注于特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！