Javascript 谷歌地图以不同颜色显示备选道路

我有下面的谷歌地图-我需要在两个位置之间显示多个选项-我只显示了一条路线-如果可能的话，还需要两个不同颜色的地图

在文档中，我得到的东西并不是我要解决的

$(document).ready(function(){

var markers = [

    {
        "title": '',
        "lat": '56.965969',
        "lng": '24.143496',
        "description": ''
       }

   ,

    {
        "title": '',
        "lat": '56.966259',
        "lng": '24.385860',
        "description": ''
       }];

var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(56.975749, 24.279310),
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    styles: [
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#d3d3d3"
                },
        {
            "lightness": 17
                }]
            },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f5f5f5"
                },
        {
            "lightness": 20
                }]
            },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 17
                }]
            },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 29
                },
        {
            "weight": 0.2
                }]
            },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 18
                }]
            },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#ffffff"
                },
        {
            "lightness": 16
                }]
            },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f5f5f5"
                },
        {
            "lightness": 21
                }]
            },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#dedede"
                },
        {
            "lightness": 21
                }]
            },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
        {
            "visibility": "on"
                },
        {
            "color": "#ffffff"
                },
        {
            "lightness": 16
                }]
            },
    {
        "elementType": "labels.text.fill",
        "stylers": [
        {
            "saturation": 36
                },
        {
            "color": "#333333"
                },
        {
            "lightness": 40
                }]
            },
    {
        "elementType": "labels.icon",
        "stylers": [
        {
            "visibility": "off"
                }]
            },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
        {
            "color": "#f2f2f2"
                },
        {
            "lightness": 19
                }]
            },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
        {
            "color": "#fefefe"
                },
        {
            "lightness": 20
                }]
            },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
        {
            "color": "#fefefe"
                },
        {
            "lightness": 17
                },
        {
            "weight": 1.2
                }]
            }]
};

var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);
var poly = new google.maps.Polyline(
{
    map: map,
    strokeColor: '#a4c431',
    strokeOpacity: 1.0,
    strokeWeight: 5
});

var lat_lng = new Array();

var image = 'images/sillava-pin.png';
var marker = new google.maps.Marker(
{
    position: new google.maps.LatLng(56.966259, 24.385860),
    map: map,
    title: 'Sillava',
    icon: image
});
for (i = 0; i < markers.length; i++)
{
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);

}

for (var i = 0; i < lat_lng.length; i++)
{
    if ((i + 1) < lat_lng.length)
    {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        path.push(src);
        poly.setPath(path);
        service.route(
        {
            origin: src,
            destination: des,
            provideRouteAlternatives: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++)
                {
                    path.push(result.routes[0].overview_path[i]);
                }
            }
        });
    }
} })

$（文档）.ready（函数（）{
变量标记=[
{
“标题”：“，
“lat”：“56.965969”，
“液化天然气”：“24.143496”，
“说明”：“
}
,
{
“标题”：“，
“lat”：“56.966259”，
“液化天然气”：“24.385860”，
“说明”：“
}];
变量映射选项={
缩放：11，
中心：新google.maps.LatLng（56.975749,24.279310），
滚轮：错误，
导航控制：错误，
mapTypeControl:false，
scaleControl:false，
可拖动：错误，
风格：[
{
“功能类型”：“水”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“D3”
},
{
“轻盈”：17
}]
},
{
“特色类型”：“景观”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#F5”
},
{
“轻盈”：20
}]
},
{
“功能类型”：“道路.公路”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“#ffffff”
},
{
“轻盈”：17
}]
},
{
“功能类型”：“道路.公路”，
“elementType”：“geometry.stroke”，
“造型师”：[
{
“颜色”：“#ffffff”
},
{
“轻盈”：29
},
{
“重量”：0.2
}]
},
{
“功能类型”：“道路干线”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#ffffff”
},
{
“轻盈”：18
}]
},
{
“功能类型”：“road.local”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#ffffff”
},
{
“轻盈”：16
}]
},
{
“featureType”：“poi”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#F5”
},
{
“轻盈”：21
}]
},
{
“功能类型”：“poi.park”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“dedede”
},
{
“轻盈”：21
}]
},
{
“elementType”：“labels.text.stroke”，
“造型师”：[
{
“可见性”：“打开”
},
{
“颜色”：“#ffffff”
},
{
“轻盈”：16
}]
},
{
“elementType”：“labels.text.fill”，
“造型师”：[
{
“饱和”：36
},
{
“颜色”：“#333333”
},
{
“轻盈”：40
}]
},
{
“elementType”：“labels.icon”，
“造型师”：[
{
“可见性”：“关闭”
}]
},
{
“featureType”：“transit”，
“elementType”：“几何体”，
“造型师”：[
{
“颜色”：“#f2f2”
},
{
“轻盈”：19
}]
},
{
“功能类型”：“管理”，
“elementType”：“geometry.fill”，
“造型师”：[
{
“颜色”：“#fefefe”
},
{
“轻盈”：20
}]
},
{
“功能类型”：“管理”，
“elementType”：“geometry.stroke”，
“造型师”：[
{
“颜色”：“#fefefe”
},
{
“轻盈”：17
},
{
“重量”：1.2
}]
}]
};
var path=new google.maps.MVCArray（）；
var service=new google.maps.DirectionsService（）；
var infoWindow=new google.maps.infoWindow（）；
var map=new google.maps.map（document.getElementById（“map_1”），mapOptions）；
var poly=new google.maps.Polyline(
{
地图：地图，
strokeColor:“#a4c431”，
笔划不透明度：1.0，
冲程重量：5
});
var lat_lng=新阵列（）；
var image='images/sillava pin.png'；
var marker=new google.maps.marker(
{
位置：新google.maps.LatLng（56.966259,24.385860），
地图：地图，
标题：“Sillava”，
图标：图像
});
对于（i=0；i

谢谢

将

ProviderRouteAlternations

选项设置为to

true

ProviderRoute备选方案
类型：布尔型 是否应提供路线替代方案。可选

添加第二个循环以处理返回的任何其他路由

service.route({
    origin: src,
    destination: des,
    provideRouteAlternatives: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        for (var j = 0; j < result.routes.length; j++) {
            var path = new google.maps.MVCArray();
            polyArray.push(new google.maps.Polyline({
               map: map,
               strokeColor: colors[j],
               strokeOpacity: 1.0,
               strokeWeight: 5
            }));
            polyArray[polyArray.length - 1].setPath(path);
            for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
                path.push(result.routes[j].overview_path[i]);
            }
        }
    }
});

您需要一个带有