Javascript 如何偏移方向将多段线布线到地图画布的侧面？

目前我正在处理一个基于方向的项目，我想在渲染时将方向推到右侧。 这就是我得到的。

我不想在面板后面知道方向。 这就是我想要的。

指向右侧两点之间的方向

我在两点之间渲染方向的代码如下

renderDirections(): void {
    var placeID = this.destinationPlaceId.getPlace();
    console.log(placeID.place_id);
    this.destinationPlaceId = placeID.place_id;
    let directionsService = new google.maps.DirectionsService;

    let directionsRenderer = new google.maps.DirectionsRenderer({
        preserveViewport: false
    });
    initMap();
    directionsRenderer.setMap(map);

    placeID = this.startPlaceID.getPlace();
    console.log(placeID.place_id);
    this.originPlaceId = placeID.place_id;
    directionsService.route(
        {
            origin: { 'placeId': this.originPlaceId },
            destination: { 'placeId': this.destinationPlaceId },
            travelMode: google.maps.TravelMode[this.travelMode]
        },
        function (response, status) {
            if (status === 'OK') {
                directionsRenderer.setDirections(response);

            } else {
                window.alert('Directions request failed due to ' + status);
                window.location.reload();
            }
        });
}

---

没有现成的功能来实现这一点，但它是可行的，只要您知道顶层的宽度（和位置）

以下是您如何做到这一点：

在开始偏移过程之前，在地图上绘制路线并侦听map

idle

事件

检查管线边界的最左侧点，以查看其是否落在覆盖后面。这利用

fromLatLngToPoint（）

方法将lat/lng坐标转换为地图投影上的一个点

通过比较路线最左侧和最右侧的点与地图上的可用空间，检查可以偏移路线的程度。偏移贴图，直到两个点都适合可用的画布空间

如果两个点都无法在地图画布中显示，请缩小并再次启动相同的过程

脚本必须知道覆盖的宽度，并且您应该应用一些边距，以使其始终适合

工作代码段：

var方向显示；
var定向服务；
var开始、结束；
var映射；
var routeBounds=假；
var overlayWidth=200；//覆盖DIV的宽度
var leftMargin=30；//宽限边距，以避免覆盖边缘的配合过密
var rightMargin=80；//宽大的边距，以避免右边的配合过于紧密，并为控件留出空间
重叠宽度+=左边距；
函数初始化（）{
directionsService=new google.maps.directionsService（）；
start=newgoogle.maps.LatLng（48.857380,2.351717）；
end=新的google.maps.LatLng（50.108814,8.672309）；
var btn1=document.getElementById（'calcRoute'）；
btn1.addEventListener（'click'，Calcrout）；
var btn2=document.getElementById（'offsetMap'）；
btn2.addEventListener（'click'，offsetMap）；
var btn3=document.getElementById（'fitAndOffsetMap'）；
btn3.addEventListener（'click'，fitAndOffsetMap）；
var btn4=document.getElementById（'fitMap'）；
btn4.addEventListener（'click'，fitMap）；
directionsDisplay=新建google.maps.DirectionsRenderer({
德拉格布尔：是的
});
变量映射选项={
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：开始，
全控选项：{
位置：google.maps.ControlPosition.TOP\u右
},
ZoomControl选项：{
位置：google.maps.ControlPosition.TOP\u右
}
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
方向显示.setMap（地图）；
}
函数offsetMap（）{
如果（routeBounds！==false）{
//清除结果中定义的侦听器
google.maps.event.clearListeners（map'idle'）；
//右上角
var topRightCorner=new google.maps.LatLng（map.getBounds（）.getNorthEast（）.lat（），map.getBounds（）.getNorthEast（）.lng（））；
//右上角
var topRightPoint=fromlAtlngTopPoint（topRightCorner）.x；
//获取最左侧和最右侧点的像素位置
var leftCoords=routeBounds.getSouthWest（）；
var leftMost=fromLatLngToPoint（leftCoords）.x；
var rightmest=fromlAtngTopoint（routeBounds.getNorthEast（））.x；
//计算左右偏移
var leftOffset=（覆盖宽度-最左侧）；
var rightOffset=（（topRightPoint-rightMargin）-最右边）；
//仅当需要左偏移时
如果（左偏移量>=0）{
if（左偏移<右偏移）{
var mapOffset=数学圆（（rightOffset-leftOffset）/2）；
//按x轴上计算的偏移平移贴图
地图平移（-mapOffset，0）；
//平移后获得新的左点
var newLeftPoint=fromLatLngToPoint（leftCoords）.x；
如果（newLeftPoint）在使用了这段代码之后，我能够实现我想要的。谢谢Upsidown先生的帮助。