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