Question

我按时间顺序从DB中提取多个位置 - 我将位置放入地图并制作连接它们的折线。

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

我对Google Maps API没有太多经验，但我认为这很容易做到。（可能是setTimeout？）

感谢。

Answer 1

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

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

//=============== 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地图重点关注特定位置

1 个答案: