Javascript 从一组点为google maps多段线设置动画，如在动画中

我有一组或一组表示车辆路线或路径的点（lat、lon）。我想在类似于flash的东西（但使用javascript和google maps api）中播放这些要点，如本页所示：

或者类似于谷歌地图的页面：

我一直在寻找许多教程，但没有提供一个直接的解决方案

animaps的问题是，我应该始终将其作为iframe嵌入到我的网站中，而我需要使其动态化，因为我有从数据库检索到的位置

首先使用 获取从到位置的方向

然后为该方向创建一条多段线，可以向该多段线添加符号，并通过更新其偏移量沿其路径设置动画

var映射；
var方向显示；
var directionsService=new google.maps.directionsService（）；
变量多段线，符号；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var chicago=new google.maps.LatLng（41.850033，-87.6500523）；
变量映射选项={
缩放：7，
中心：芝加哥，
风格：[{
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“212121”
}]
}, {
“elementType”：“labels.icon”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#7575”
}]
}, {
“elementType”：“labels.text.stroke”，
“造型师”：[{
“颜色”：“212121”
}]
}, {
“功能类型”：“管理”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“#7575”
}, {
“可见性”：“关闭”
}]
}, {
“featureType”：“administration.country”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#9e9e9e”
}]
}, {
“功能类型”：“行政用地”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“administration.locality”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#bdbdbd”
}]
}, {
“featureType”：“administration.neighbour”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“poi”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“poi”，
“elementType”：“labels.text”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“poi”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#7575”
}]
}, {
“功能类型”：“poi.park”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“#181818”
}]
}, {
“功能类型”：“poi.park”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#6161”
}]
}, {
“功能类型”：“poi.park”，
“elementType”：“labels.text.stroke”，
“造型师”：[{
“颜色”：“#1b1b”
}]
}, {
“功能类型”：“道路”，
“elementType”：“geometry.fill”，
“造型师”：[{
“颜色”：“#2C2C”
}]
}, {
“功能类型”：“道路”，
“elementType”：“标签”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“道路”，
“elementType”：“labels.icon”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“道路”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#8a8a8a”
}]
}, {
“功能类型”：“道路干线”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“#3737”
}]
}, {
“功能类型”：“道路.公路”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“3c”
}]
}, {
“功能类型”：“道路、公路、受控通道”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“#4e4e”
}]
}, {
“功能类型”：“road.local”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#6161”
}]
}, {
“featureType”：“transit”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“featureType”：“transit”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#7575”
}]
}, {
“功能类型”：“水”，
“elementType”：“几何体”，
“造型师”：[{
“颜色”：“000000”
}]
}, {
“功能类型”：“水”，
“elementType”：“labels.text”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“水”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#3d3D”
}]
}]
}
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
方向显示.setMap（地图）；
calcRoute（）；
}
函数calcRoute（）{
var请求={
来源：伊利诺伊州芝加哥，
目的地：“伊利诺伊州皮奥里亚”，
travelMode:“驾驶”
};
路由（请求、功能（响应、状态）{
如果（状态=‘正常’）{
创建路径（响应）；
}
});
}
函数createPath（响应）{
符号={
路径：google.maps.SymbolPath.CIRCLE，
比例：6，
strokeColor:“#fff”
};
polyline=新的google.maps.polyline({
路径：[]，
strokeColor:“#e91e63”，
冲程重量：3，
图标：[{
图标：符号，
偏移量：“0%”
}]
});
var bounds=new google.maps.LatLngBounds（）；
var legs=response.routes[0]。legs；
对于（i=0；i