Блог

Я нашел кое-что хорошее анимированный маршрут, созданный @Chad Killingsworth в этом jsfiddle, я просто хочу спросить, можно ли автоматически настроить окно просмотра карты, чтобы мы могли видеть маршрут, куда он направляется.

 function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng("54.32216667","10.16530167"),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var path_start = new Array();
  var path_end = new Array();

  path_start.push(new google.maps.LatLng("54.32216667","10.16530167"));
  path_end.push(new google.maps.LatLng("54.32216667","10.16530167"));

  // lots of other points

  path_start.push(new google.maps.LatLng("54.36457667","10.12173333"));
  path_end.push(new google.maps.LatLng("54.36457833","10.121745"));

  var carPolyline = new google.maps.Polyline({
    map: map,
    geodesic : true,
    strokeColor : '#FF0000',
    strokeOpacity : 1.0,
    strokeWeight : 2
  });
  var carPath = new google.maps.MVCArray();
  for ( var i = 0; i < path_start.length; i  ) {
    if(i === 0) {
      carPath.push(path_start[i]);
      carPolyline.setPath(carPath);
    } else {
      setTimeout((function(latLng) {
        return function() {
          carPath.push(latLng);
        };
      })(path_start[i]), 100 * i);
    }
  }
 

Заранее благодарю вас.

Добавить:

 map.setCenter(latLng);
 

к коду, который рисует ломаную линию.

   var carPath = new google.maps.MVCArray();
  for ( var i = 0; i < path_start.length; i  ) {
    if(i === 0) {
      carPath.push(path_start[i]);
      carPolyline.setPath(carPath);
    } else {
      setTimeout((function(latLng) {
        return function() {
          carPath.push(latLng);
          map.setCenter(latLng);
        };
      })(path_start[i]), 100 * i);
    }
  }
 

обновлена скрипка