-1

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.

4

1 に答える 1

1

ポリラインに沿ってマーカーをアニメーション化する 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 =====================
于 2013-10-05T19:43:32.390 に答える