Javascript 谷歌地图绘制移动距离多段线

我想使用google maps API的V3在预设路线上绘制一条“行驶距离”多段线

多段线需要穿过多个航路点/航段

我目前正在使用DirectionsService绘制完整的路线

我还使用了epolys.js来获取行驶距离的标记位置

我正在将整个管线复制到新的多段线中，但我只希望将管线复制到标记位置

演示链接：

这就是我现在和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(); };

var地理编码器；
var映射；
var标记；
var gmarkers=[]；
var METERS_至_MILES=0.000621371192；
var walk=（数学四舍五入（670*1609.344））；
//图标
var iconImage=new google.maps.MarkerImage(
'http://www.ronnieatkinson.co.uk/clients/wc2015/maps/01/mapIcons/marker_red.png“，//标记URL
新的google.maps.Size（20,34），//标记大小（WxH）
新的google.maps.Point（0,0），//标记原点
新的google.maps.Point（9,34）//标记锚
);
//影子
var iconShadow=新的google.maps.MarkerImage(
'http://www.google.com/mapfiles/shadow50.png“，//卷影URL
新的google.maps.Size（37,34），//阴影大小（WxH）
新的google.maps.Point（0,0），//阴影原点
新的google.maps.Point（9,34）//阴影锚
);
//信息窗口
var infowindow=new google.maps.infowindow（{
尺寸：新谷歌地图尺寸（150,50）
});
//创建标记
函数createMarker（板条、标签、html）{
var contentString=''+label+'
'+html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
影子：iconShadow，
图标：iconImage，
标题：标签，
zIndex:Math.round（latlng.lat（）*-100000）在创建直线时计算直线的长度。一旦它大于或等于“行走”距离，停止向其添加点

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


注意：
MarkerImage
很久以前就被弃用了，标记不再支持阴影。@geocodezip谢谢，我将更新/删除这些。