Javascript 如何更改Google map v3方向上虚线的颜色

我正在研究运输方向，并且能够使用polylineOptions属性更改为运输路线显示的多段线的颜色

但是，我无法更改为步行方向显示的虚线的颜色

我确实遇到过这个解决方案，但它不适用于v3（在v3.22中试用过）

我在本文中包含了一个工作示例

var directions=new google.maps.DirectionsService（）；
var renderer=new google.maps.directionsrender({
多段线选项：{
strokeColor:“#C83939”，
笔划不透明度：0.8，
冲程重量：7
}
});
var图，transitLayer；
函数初始化（）{
变量映射选项={
缩放：13，
中心：新google.maps.LatLng（40.7482333，-73.8681295），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
google.maps.event.addDomListener（document.getElementById（'go'），'click'，
路线）；
var input=document.getElementById（'from'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
autocomplete.bindTo（'bounds'，map）；
transitLayer=new google.maps.transitLayer（）；
var control=document.getElementById（'transit-wpr'）；
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（控件）；
google.maps.event.addDomListener（控件，'click'，函数（）{
transitLayer.setMap（transitLayer.getMap（）？null:map）；
});
addDepart（）；
路线（）；
}
函数addDepart（）{
var depart=document.getElementById（'depart'）；
对于（变量i=0；i<24；i++）{
对于（var j=0；j<60；j+=15）{
var x=i<10？'0'+i:i；
变量y=j<10？'0'+j:j；
depart.innerHTML+=''+x+''：''+y+''；
}
}
}
函数路径（）{
var DEVIATION=document.getElementById（'DEVIATE'）。值；
变量位=离开。拆分（'：'）；
var now=新日期（）；
var tzOffset=（现在.getTimezoneOffset（）+60）*60*1000；
变量时间=新日期（）；
时间设置小时数（位[0]）；
time.setMinutes（位[1]）；
var ms=time.getTime（）-tzOffset；
if（ms
html，
身体{
身高：100%；
填充：0；
保证金：0；
颜色：黑色；
字体系列：arial，无衬线；
字体大小：13px；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：50%；
}
#面板wpr{
位置：绝对位置；
排名：0；
底部：0；
左：50%；
右：0；
溢出：自动；
}
#面板{
字体系列：arial；
填充：0 5px；
}
#信息{
填充物：5px；
}
#从{
宽度：90%；
字体大小：1.2米；
}
.adp方向{
宽度：100%；
}
.输入{
背景色：白色；
左侧填充：8px；
边框：1px实心#D9D9D9；
边框顶部：1件纯银；
-webkit边界半径：1px；
-moz边界半径：1px；
边界半径：1px；
}
.时间{
保证金：0；
高度：17px；
边框：1px实心；
边框顶部颜色：#CCC；
右边框颜色：#999；
左边框颜色：#999；
边框底色：#CCC；
填充：2px15px 1px 1px；
}
钮扣{
边框：1px实心#3079ED；
颜色：白色；
背景色：#4D90FE；
背景图像：-webkit渐变（线性、左上、左下、从（#4D90FE）到（#4787ED））；
背景图像：-webkit线性渐变（顶部，#4D90FE，#4787ED）；
背景图像：-莫兹线性梯度（顶部，#4D90FE，#4787ED）；
背景图像：-ms线性梯度（顶部，#4D90FE，#4787ED）；
背景图像：-o-线性梯度（顶部，#4D90FE，#4787ED）；
背景图像：线性梯度（顶部，#4D90FE，#4787ED）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorStr='#4d90fe'，EndColorStr='#4787ed'）；
显示：内联块；
最小宽度：54px；
文本对齐：居中；
字体大小：粗体；
填充：0 8px；
线高：27px；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
-webkit转换：所有0.218s；
-moz转换：所有0.218s；
-o-过渡：均为0.218s；
过渡：均为0.218s；
}
#资讯组{
线高：22px；
字体大小：110%；
}
.btn{}#小组wpr{
左边框：1px实心#e6；
}
#信息{
边框底部：1px实心#e6；
边缘底部：5px；
}
氢{
保证金：0；
填充：0；
}
Google地图JavaScript API v3示例：Transit
切换传输层
过境方向
发件人：
致：
51街，美国纽约州纽约市，邮编10022
出发于
问路
这些线的选项是固定的，不受DirectionsRenderer的多段线选项的影响

这些虚线的多段线选项（当前）将由API设置为：

{
  "icons": [{
    "icon": {
      "path": 0,
      "scale": 3,
      "fillOpacity": 0.7,
      "fillColor": "#00b3fd",
      "strokeOpacity": 0.8,
      "strokeColor": "#3379c3",
      "strokeWeight": 1
    },
    "repeat": "10px"
  }],
  "strokeColor": "#000000",
  "strokeOpacity": 0,
  "strokeWeight": 5
}

…将忽略DirectionsRenderer的任何自定义多段线选项

可能的解决方法（但只能为所有这些虚线设置一个固定值）：


函数initMap（）{
var goo=google.maps，
map=new goo.map（document.getElementById（'map'）{
缩放：7，
中心：{lat:41.85，lng:-87.65}
}),
directionsService=新的goo.directionsService，
方向显示
var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var walkingPolylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#C83939',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#C83939',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};

function renderDirectionsPolylines(response) {
  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;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      if (steps[j].travel_mode == google.maps.TravelMode.WALKING) {
        stepPolyline.setOptions(walkingPolylineOptions)
      }
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      stepPolyline.setMap(map);
    }
  }
}