谷歌地圖javascript：在半地圖上顯示路線

Question

我正在一個網頁上顯示谷歌地圖的背景和一個窗體左側的一半，右半部應顯示請求的路線。請知道谷歌地圖將覆蓋100％的頁面寬度。下面是完整的查詢圖片：

Query description

任何想法，我應該怎麼做到這一點？ 在我看來，它應該用LatLngBounds來完成，將路由邊界延伸到左邊的某個值，但我不知道如何計算該確切值，以便將路線放置在地圖上的所需位置。

提前致謝。

Answer 1

我建議：

1. 得到的路線的邊界（或獲取地圖視方向服務autozooms地圖後

2. 縮小地圖1次（這樣的視口。需要兩倍的尺寸來顯示路線）

3. 中心的路線的邊界的左側尺寸的中心的地圖。

proof of concept fiddle

代碼片斷：

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>