谷歌地图上的动画标记和折线

Question

我有一个页面正在显示预定义的路径。目前，折线和最终标记已设置动画以显示路线。我希望沿路线的点随着标记和多段线到达而出现。努力确定如何做到这一点。

页面在这里：https://turtletrackstg.wpengine.com/?tid=622&sent=1

这就是我所拥有的（在地图初始化中称为autoRefresh）：

function moveMarker(map, marker, latlng) {
        marker.setPosition(latlng);
    }

    function autoRefresh(map, locations, bounds, infowindow) {
        var i, route, marker;

        route = new google.maps.Polyline({
            path: [],
            geodesic : true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            editable: false,
            map:map
        });

        for (i = 0; i < locations.length; i++) {


            if (locations[i][1] =='undefined'){ title ='';} else { title = locations[i][1];}
            if (locations[i][2] =='undefined'){ description ='';} else { description = locations[i][2];}
            if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            if (locations[i][4] =='undefined'){ turtleurl ='';} else { turtleurl = locations[i][4];}
            if (locations[i][3] =='undefined'){ turtlethumb ='';} else { turtlethumb = locations[i][3];}
            if (locations[i][8] =='undefined'){ turtlename ='';} else { turtlename = locations[i][8];}
            if (locations[i][9] =='undefined'){ turtlegender ='';} else { turtlegender = locations[i][9];}
            if (locations[i][10] =='undefined'){ turtleage ='';} else { turtleage = locations[i][10];}
            if (locations[i][11] =='undefined'){ turtlespecies ='';} else { turtlespecies = locations[i][11];}
            if (locations[i][12] =='undefined'){ turtlesize ='';} else { turtlesize = locations[i][12];}
            if (locations[i][14] =='undefined'){ datelastdetected ='';} else { datelastdetected = locations[i][14];}
            if (locations[i][15] =='undefined'){ dateofpoint ='';} else { dateofpoint = locations[i][15];}
            distancetraveled = "<?php echo round($distance_traveled,2) ." miles";?>";

            if (markericon == 1) {
                marker = new google.maps.Marker({
                    icon: { path: google.maps.SymbolPath.CIRCLE,scale: 5.5,fillColor: "#00d346",fillOpacity: 1,strokeWeight: 0.4 },
                    position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                    map: map,
                    title: title,
                    desc: description,
                    name: turtlename,
                    gender: turtlegender,
                    age: turtleage,
                    turtlethumb: turtlethumb,
                    turtlespecies: turtlespecies,
                    turtlesize: turtlesize,
                    distancetraveled: distancetraveled,
                    datelastdetected: datelastdetected,
                    dateofpoint: dateofpoint,
                });
            }

            if (markericon == 2) {
                marker = new google.maps.Marker({
                    icon: { path: google.maps.SymbolPath.CIRCLE,scale: 5.5,fillColor: "#f00",fillOpacity: 1,strokeWeight: 0.4 },
                    position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                    map: map,
                    title: title,
                    desc: description,
                    name: turtlename,
                    gender: turtlegender,
                    age: turtleage,
                    turtlethumb: turtlethumb,
                    turtlespecies: turtlespecies,
                    turtlesize: turtlesize,
                    distancetraveled: distancetraveled,
                    datelastdetected: datelastdetected,
                    dateofpoint: dateofpoint,
                });

            }

            if (markericon == 3) {
                marker = new google.maps.Marker({
                    icon: '<?php echo $siteurl;?>/wp-content/themes/jupiter-child/assets/img/maps-present.png',
                    position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                    map: map,
                    title: title,
                    desc: description,
                    name: turtlename,
                    gender: turtlegender,
                    age: turtleage,
                    turtlethumb: turtlethumb,
                    turtlespecies: turtlespecies,
                    turtlesize: turtlesize,
                    distancetraveled: distancetraveled,
                    datelastdetected: datelastdetected,
                    dateofpoint: dateofpoint,
                });
            }


            bounds.extend(marker.position);


            //let's link only the most recent location
            if (i == locations.length-1) {
            }

            google.maps.event.addListener(marker, 'click', function() {
                if (iw) iw.close();
                iw = new google.maps.InfoWindow({ content: "<div><h3>"+this.title+"</h3><br><strong>Species</strong>: "+this.turtlespecies+"<br><strong>Gender</strong>: "+this.gender+"<br><strong>Distance Traveled</strong>: "+this.distancetraveled+"<br><strong>Location Date</strong>: "+this.dateofpoint+"<br><strong>Last Detection</strong>: "+this.datelastdetected+"</div>"});
                iw.open(map,this);
            });


            link = '';

            var lat = locations[i][5];
            var long = locations[i][6];

            map.fitBounds(bounds);

        }
        //marker=new google.maps.Marker({map:map,icon:"<?php echo $siteurl;?>/wp-content/themes/jupiter-child/assets/img/maps-present.png"});
       // marker = marker;
        for (i = 0; i < pathCoords.length; i++) {
            setTimeout(function (coords)
            {
                var latlng = new google.maps.LatLng(coords.lat, coords.lng);
                route.getPath().push(latlng);
                moveMarker(map, marker, latlng);
            }, 200 * i, pathCoords[i]);
        }
    }

    var pathCoords = [
              <?php echo $flightpath;?>
            ];