动画谷歌地图像一组点中的折线，如动画中

Question

我有一组或一组点（lat，lon），它们代表车辆路线或路径。我想在看起来像闪光灯的东西中玩这些点（但是使用javascript和谷歌地图api），就像在这个页面中一样：

http://www.animaps.com/pb/161960002/1805/Piraeus_Line

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

https://www.youtube.com/watch?v=iec4fVTuNCE

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

animaps的问题在于我应该始终将其作为iframe嵌入到我的网站中，而我需要将其设置为动态，因为我从数据库中检索了位置。

Answer 1

首先使用 Directions Service  从从＆gt;获取路线到职位。

然后为该方向创建折线，您可以添加符号，通过更新其偏移量，您可以添加符号，使其沿着它的路径设置动画。

＆＃13;

＆＃13;

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);

＆＃13;

#map {
  height: 200px;
  width: 100%;
}

＆＃13;

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

＆＃13;

＆＃13;

＆＃13;