Javascript 使用多段线的Google Map directionsRenderer会错过航路点中的某些路线

我正在使用谷歌地图API。我想在地图上标出虚线。如果将多段线点对象添加到google.maps.DirectionsRenderer，它将丢失地图上的某些路径。A点和B点之间缺少路线（请检查我的路线）

我试过不使用polylinedopped，这样就可以了

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

我的愿望必须是：

列表项

颜色#9966ff

虚线

多个航路点

---

polylinedopped

应该是

PolylineOptions

对象，而不是

Polyline

这：

应该是：

var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
};

代码片段：

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var infoWindow=new google.maps.infoWindow（）；
函数初始化（）{
变量lineSymbol={
路径：google.maps.SymbolPath.CIRCLE，
不透明度：1，
比例：3
};
var多段线点={
strokeColor:“#9966ff”，
笔划不透明度：0，
不透明度：0，
图标：[{
图标：lineSymbol，
偏移量：“0”，
重复：“10px”
}],
};
var renderoptions={
地图：地图，
对:错,，
多段线选项：多段线虚线
};
directionsDisplay=新建google.maps.DirectionsRenderer（渲染器选项）；
var center=newgoogle.maps.LatLng（0,0）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：中心
};
map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
方向显示.setMap（地图）；
var start=“纽约市拉斐特大道212号”；
var end=“纽约市默特尔大道11612号”；
var方法=‘驱动’；
var请求={
来源：start，
航路点：[{
地点：“纽约市布鲁克林Jackie Robinson Pkwy”，
中途停留：对
}],
目的地:完，
travelMode:google.maps.DirectionsTravelMode[方法]
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var iwContent=response['routes'][0]。legs[0]。distance.text+'
'+response['routes'][0]。legs[0]。duration.text；
infoWindow.setContent（iwContent）；
}
});
google.maps.event.addListener（多段线点，'click'，函数（事件）{
infoWindow.setPosition（event.latLng）；
打开（地图，这个）；
});
google.maps.event.addListener（映射，'click'，函数（）{
infoWindow.close（）；
});
}
初始化（）
#地图画布{
高度：400px；
}
多段线点
应该是
多段线选项
对象，而不是
多段线

这：

应该是：

var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
};



代码片段：


var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var infoWindow=new google.maps.infoWindow（）；
函数初始化（）{
变量lineSymbol={
路径：google.maps.SymbolPath.CIRCLE，
不透明度：1，
比例：3
};
var多段线点={
strokeColor:“#9966ff”，
笔划不透明度：0，
不透明度：0，
图标：[{
图标：lineSymbol，
偏移量：“0”，
重复：“10px”
}],
};
var renderoptions={
地图：地图，
对:错,，
多段线选项：多段线虚线
};
directionsDisplay=新建google.maps.DirectionsRenderer（渲染器选项）；
var center=newgoogle.maps.LatLng（0,0）；
变量myOptions={
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：中心
};
map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
方向显示.setMap（地图）；
var start=“纽约市拉斐特大道212号”；
var end=“纽约市默特尔大道11612号”；
var方法=‘驱动’；
var请求={
来源：start，
航路点：[{
地点：“纽约市布鲁克林Jackie Robinson Pkwy”，
中途停留：对
}],
目的地:完，
travelMode:google.maps.DirectionsTravelMode[方法]
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var iwContent=response['routes'][0]。legs[0]。distance.text+'
'+response['routes'][0]。legs[0]。duration.text；
infoWindow.setContent（iwContent）；
}
});
google.maps.event.addListener（多段线点，'click'，函数（事件）{
infoWindow.setPosition（event.latLng）；
打开（地图，这个）；
});
google.maps.event.addListener（映射，'click'，函数（）{
infoWindow.close（）；
});
}
初始化（）
#地图画布{
高度：400px；
}

您使用了我的示例代码，而我从未尝试过使用航路点，我很惊讶它不起作用。。。我来看看。我在我的项目中尝试过这个功能，在你的例子中得到了相同的结果。如果我删除RenderOptions对象，routes将显示并应用默认样式（BLE path）。这是代码中的一个错误<代码>多段线点
应该是
多段线选项
对象，而不是
多段线
。您使用了我的示例代码，但我从未尝试过使用航路点，我很惊讶它不起作用。。。我来看看。我在我的项目中尝试过这个功能，在你的例子中得到了相同的结果。如果我删除RenderOptions对象，routes将显示并应用默认样式（BLE path）。这是代码中的一个错误<代码>多段线点

应该是

多段线选项

对象，而不是

多段线

。天哪，我怎么会错过这个。。。谢谢你睁开我的眼睛！我已经更新了我的各种小提琴，这应该可以防止其他人重复使用错误的版本（如果不使用航路点，它会出人意料地工作）。谢谢，这应该可以防止再次出现这种情况。谢谢@MrUpsidown&@geocodezip！在你的帮助下，我已经解决了这个问题。很抱歉我不知道不