谷歌地圖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>