Google maps draw distance пройденная полилиния

Question

Я хотел бы нарисовать полилинию с пробелом по заранее заданному маршруту, используя V3 API карт google.

Полилиния должна проходить через несколько путевых точек/ног.

В настоящее время я пользуюсь службой DirectionsService, чтобы нарисовать полный маршрут.

Я также использую epolys.js, чтобы получить положение маркера для пройденного расстояния.

Я копирую полный маршрут в новую полилинию, но мне бы хотелось только скопировать маршрут до положения маркера.

Демо ссылка: http://codepen.io/1983ron/pen/wKMVQr

И где им Heres в настоящее время с JS

var geocoder; 
var map; 
var marker; 
var gmarkers = []; 
var METERS_TO_MILES = 0.000621371192; 
var walked = (Math.round(670 * 1609.344)); 

//ICON 
var iconImage = new google.maps.MarkerImage(
    'http://www.ronnieatkinson.co.uk/clients/wc2015/maps/01/mapIcons/marker_red.png',  //MARKER URL 
    new google.maps.Size(20, 34), //MARKER SIZE (WxH) 
    new google.maps.Point(0,0),  //MARKER ORIGIN 
    new google.maps.Point(9, 34) //MARKER ANCHOR 
); 

//SHADOW 
var iconShadow = new google.maps.MarkerImage(
    'http://www.google.com/mapfiles/shadow50.png', //SHADOW URL 
    new google.maps.Size(37, 34),     //SHADOW SIZE (WxH) 
    new google.maps.Point(0,0),      //SHADOW ORIGIN 
    new google.maps.Point(9, 34)     //SHADOW ANCHOR 
); 

//INFO WINDOW 
var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50) 
}); 

//CREATE MARKER 
function createMarker(latlng, label, html) { 
    var contentString = '<b>'+label+'</b><br>'+html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     shadow: iconShadow, 
     icon: iconImage, 
     title: label, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

    marker.myname = label; 
    gmarkers.push(marker); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
    }); 
    return marker; 
} 

function initialize() { 
    var latlng = new google.maps.LatLng(51.555967, -0.279736); 
    var myOptions = { 
     zoom: 9, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    var rendererOptions = { 
     map: map, 
     suppressMarkers: true, 
    }; 

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

    //Edinburgh to Eden Project 
    var point1 = new google.maps.LatLng(58.981386, -2.973751); //Orkney Rugby Football Club 
    var point2 = new google.maps.LatLng(55.881517, -4.342057); //Scotstoun Stadium 
    var point3 = new google.maps.LatLng(54.998080, -7.319812); //Guildhall St 
    var point4 = new google.maps.LatLng(54.563716, -5.942729); //Belfast Harlequins RFC 
    var point5 = new google.maps.LatLng(53.271057, -9.054253); //Hotel Spanish Arch 
    var point6 = new google.maps.LatLng(52.674222, -8.642515); //Thomond Park 
    var point7 = new google.maps.LatLng(53.291755, -3.713769); //Colwyn Leisure Centre 
    var point8 = new google.maps.LatLng(51.748180, -3.618567); //Glynneath Rugby Football Club 

    var wps = [ 
     { location: point1 }, 
     { location: point2 }, 
     { location: point3 }, 
     { location: point4 }, 
     { location: point5 }, 
     { location: point6 }, 
     { location: point7 }, 
     { location: point8 } 
    ]; 

    //START 
    var org = new google.maps.LatLng (55.945315, -3.205309); //EDINBURGH 

    //FINISH 
    var dest = new google.maps.LatLng (50.360130, -4.744717); //EDEN PROJECT 

    var request = { 
     origin: org, 
     destination: dest, 
     waypoints: wps, 
     travelMode: google.maps.DirectionsTravelMode.WALKING, 
     //unitSystem: google.maps.UnitSystem.IMPERIAL 
    }; 

    directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      //SHOW ROUTE 
      directionsDisplay.setDirections(response); 

      //COPY POLY FROM DIRECTION SERVICE 
      var polyline = new google.maps.Polyline({ 
       path: [], 
       strokeColor: '#FF0000', 
       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); 
      map.fitBounds(bounds); 

      //alert(walked); 

      //ADD MARKER TO NEW POLYLINE AT 'X' DISTANCE 
      createMarker(polyline.GetPointAtDistance(walked), "You are here", (Math.round(walked * METERS_TO_MILES * 10)/10)+' miles'); 

      //GET THE TOTAL DISTANCE 
      var distance= 0; 
      //var METERS_TO_MILES = 0.000621371192; 
      for(i = 0; i < response.routes[0].legs.length; i++){ 
       //FOR EACH LEG GET THE DISTANCE AND ADD IT TO THE TOTAL 
       distance += parseFloat(response.routes[0].legs[i].distance.value); 
      } 
      //alert((Math.round(distance * METERS_TO_MILES * 10)/10)+' miles'); 
      //alert(distance); //METERS 

     } else if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){ 
      alert ('Max waypoints exceeded'); 
     } else { 
      alert ('failed to get directions'); 
     } 
    }); 
};window.onload = function() { initialize(); }; 

Любая помощь будет оценена.

Answer 1

Рассчитайте длину линии при ее создании. Как только он станет больше или равен расстоянию «ходить», перестаньте добавлять к нему точки.

var lengthMeters = 0; 
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++) { 
      if (lengthMeters <= walked) { 
       // if polyline is less than distance "walked", keep adding to it 
       polyline.getPath().push(nextSegment[k]); 
       if (polyline.getPath().getLength() > 1) { 
        var lastPt = polyline.getPath().getLength() - 1; 
        lengthMeters += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(lastPt - 1), polyline.getPath().getAt(lastPt)); 
       } 
      } 
      bounds.extend(nextSegment[k]); 
     } 
    } 
} 
polyline.setMap(map); 

proof of concept fiddle