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

Question

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

查询说明

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

提前致谢。

Answer 1

我会建议：

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

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

3. 将地图置于路线边界左侧大小的中心。

概念证明小提琴

代码片段：

 var map; function initMap() { var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer({ preserveViewport: true }); map = new google.maps.Map(document.getElementById('map'), { zoom: 0, center: { lat: 41.85, lng: -87.65 } }); directionsDisplay.setMap(map); var onChangeHandler = function() { calculateAndDisplayRoute(directionsService, directionsDisplay); }; document.getElementById('start').addEventListener('change', onChangeHandler); document.getElementById('end').addEventListener('change', onChangeHandler); calculateAndDisplayRoute(directionsService, directionsDisplay); } function calculateAndDisplayRoute(directionsService, directionsDisplay) { directionsService.route({ origin: document.getElementById('start').value, destination: document.getElementById('end').value, travelMode: 'DRIVING' }, function(response, status) { if (status === 'OK') { var bounds = response.routes[0].bounds; var leftSide = new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()); var marker = new google.maps.Marker({ position: leftSide, map: map }); console.log(leftSide.toUrlValue(6)); google.maps.event.addListenerOnce(map, 'bounds_changed', function() { map.setZoom(map.getZoom() - 1); map.setCenter(leftSide); }); map.fitBounds(bounds); directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); }

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #floating-panel { position: absolute; top: 25%; left: 10px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto', 'sans-serif'; line-height: 30px; padding-left: 10px; height: 50%; opacity: 0.5; }

 <div id="floating-panel"> <b>Start: </b> <input id="start" value="New York, NY" /> <br><b>End: </b> <input id="end" value="Boston, MA" /> <br> <input id="dirbtn" value="get directions" type="button" /> </div> <div id="map"></div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> </script>