我有一组或一组点（lat，lon）代表车辆路线或路径。我想要的东西看起来像一个闪玩这些点（但使用JavaScript和谷歌地图API），如在本页面：动画从一组点（如动画）中动画Google地图多段线
在谷歌地图的页面http://www.animaps.com/pb/161960002/1805/Piraeus_Line
或类似：
https://www.youtube.com/watch?v=iec4fVTuNCE
我一直在寻找很多教程，但没有提供直接的解决方案。
动画的问题是，我应该始终将其作为iframe嵌入到我的网站中，而我需要使这种动态变化，因为我从数据库中检索位置。
首先使用 Directions Service 从你从>到位置获得方向。
然后为该方向创建一条多段线，通过更新它们的偏移量，可以添加可沿其路径设置动画的符号。
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var polyline, symbol;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
center: chicago,
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#212121"
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#212121"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"color": "#757575"
}, {
"visibility": "off"
}]
}, {
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}, {
"featureType": "administrative.land_parcel",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
}, {
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#181818"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#1b1b1b"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#2c2c2c"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8a8a8a"
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#373737"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#3c3c3c"
}]
}, {
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [{
"color": "#4e4e4e"
}]
}, {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}]
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#3d3d3d"
}]
}]
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var request = {
origin: 'chicago, il',
destination: 'peoria, il',
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
createPath(response);
}
});
}
function createPath(response) {
symbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
strokeColor: '#fff'
};
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#e91e63',
strokeWeight: 3,
icons: [{
icon: symbol,
offset: '0%'
}]
});
var bounds = new google.maps.LatLngBounds();
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
map.setCenter(bounds.getCenter());
animateCircle(polyline);
}
function animateCircle(line) {
var count = 0;
var icons = line.get('icons');
window.setInterval(function() {
count = (count + 1) % 200;
icons[0].offset = (count/2) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);#map {
height: 200px;
width: 100%;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>