谷歌地图javascript：在半幅地图上显示路线

我正在制作一个网页，它必须在背景中显示谷歌地图，在页面的左半部分和右半部分显示一个表单，应该显示请求的路线。请知道，谷歌地图将覆盖100%的页面宽度。以下是完整的查询图片：

我该如何做到这一点？ 在我看来，应该使用LatLngBounds，将路线边界扩展到左侧的某个值，但我不确定如何计算该精确值，以便将路线放置在地图上所需的位置

提前谢谢。

我建议：

获取路线边界（或在方向服务自动缩放地图后获取地图视口）

将地图缩小1倍（因此视口的大小是显示路线所需大小的两倍）

将地图居中放置在路线边界左侧的中心

代码片段：

var映射；
函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer({
保存视口：true
});
map=new google.maps.map（document.getElementById（'map'）{
缩放：0，
中心：{
拉脱维亚：41.85，
液化天然气：-87.65
}
});
方向显示.setMap（地图）；
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：document.getElementById（'start'）。值，
目标：document.getElementById（'end'）。值，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
var bounds=response.routes[0].bounds；
var leftSide=new google.maps.LatLng（bounds.getCenter（）.lat（），bounds.getsoutwest（）.lng（））；
var marker=new google.maps.marker({
位置：左侧，
地图：地图
});
console.log（leftSide.toUrlValue（6））；
google.maps.event.addListenerOnce（映射'bounds_changed'，函数（）{
map.setZoom（map.getZoom（）-1）；
地图设置中心（左侧）；
});
映射边界（bounds）；
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
#浮动面板{
位置：绝对位置；
最高：25%；
左：10px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
身高：50%；
不透明度：0.5；
}

开始：

完:

听起来有点难解决。也许有个主意：复制路线的形状，推断并在画布上绘制该形状element@EmmanuelDelay谢谢你的想法。我已经在[这里]（）看到了这种场景的实现。相关问题：。