Блог

ДЕМОНСТРАЦИЯ

Как вы можете видеть, я экспортирую route как a polyline и отображаю его на карте. Как я могу добавить анимацию в polyline подобную демонстрацию?

Вот код, который у меня есть:

 var map;
$(document).ready(function() {
  var latlng = new google.maps.LatLng(49.241943, -122.889318);
  var myOptions = {
    zoom: 12,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map($('#map_canvas').get(0), myOptions);

  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  directionsService.route({
    origin: new google.maps.LatLng(49.241943, -122.889318),
    destination: new google.maps.LatLng(49.241943, -122.962222),
    waypoints: [{
      stopover: false,
      location: new google.maps.LatLng(49.241943, -122.889318)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      // directionsDisplay.setDirections(response);
      var polyline = new google.maps.Polyline({
        path: [],
        strokeColor: '#0000FF',
        strokeWeight: 3
      });
      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);
    } else {
      window.alert('Directions request failed due to '   status);
    }
  });

});
  

Упомянутая вами анимация выполняется путем динамического рисования сегментов полилинии один за другим и перемещения маркера в конечную позицию следующего сегмента с помощью setTimeout.

Я соответствующим образом обновил вашу скрипку, см. http://jsfiddle.net/gwhwf50t/1 /

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

function autoRefresh(map, pathCoords) {
  var i, route, marker;

  route = new google.maps.Polyline({
    path: [],
    geodesic : true,
    strokeColor: '#0000FF',
    strokeWeight: 3,
    editable: false,
    map:map
  });

  marker = new google.maps.Marker({map:map, icon:"http://maps.google.com/mapfiles/ms/micons/blue.png"});

  for (i = 0; i < pathCoords.length; i  ) {             
    setTimeout(function(coords) {
      route.getPath().push(coords);
      moveMarker(map, marker, coords);
    }, 200 * i, pathCoords[i]);
  }
}

...

directionsService.route({
  ...
  if (status === google.maps.DirectionsStatus.OK) {
    autoRefresh(map, response.routes[0].overview_path);
    ...