Angular谷歌地图Directions Service自定义折线仅显示最后两点 如何让折线覆盖全路径？

问题根因 #

你为DirectionsRenderer传入的polylineOptions参数类型不符合要求：该参数仅需要接收包含折线样式配置的普通对象，不需要提前实例化google.maps.Polyline类。传入Polyline实例会导致DirectionsRenderer无法正确处理多段路线的渲染逻辑，最终仅显示最后两个点位的连线。

修改方案 #

将原实例化Polyline的逻辑改为直接定义普通配置对象即可：

错误写法 #

const polylineOptions = new google.maps.Polyline({
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 5
});
this.directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions });

正确写法 #

const polylineOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 5
};
this.directionsRenderer = new google.maps.DirectionsRenderer({ polylineOptions });

修改后无需调整其他业务逻辑，全路线的所有途经段都会自动应用你定义的折线样式，完整显示全路径。

内容的提问来源于stack exchange，提问作者Leonardo