我想要一张大的柏林地图,你可以看到多条路线。不幸的是,DirectionsRenderer会缩放到路线,因此您必须再次手动缩小。
如何避免此行为?
var $canvas = document.querySelector('#map');
var map = new google.maps.Map($canvas, {
center: new google.maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 14
});
var routes = [
{
origin: new google.maps.LatLng(52.459281, 13.356367),
destination: new google.maps.LatLng(52.455833, 13.322948),
travelMode: google.maps.TravelMode.BICYCLING
},
{
origin: new google.maps.LatLng(52.597621, 13.430536),
destination: new google.maps.LatLng(52.5918799, 13.2832929),
travelMode: google.maps.TravelMode.BICYCLING
}
];
routes.forEach(function(route) {
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer();
display.setMap(map);
display.setDirections(body);
});
});
答案 0 :(得分:30)
使用preserveViewport option of the DirectionsRenderer阻止自动缩放到路线,然后设置您喜欢的视口。
{preserveViewport: true}
或者,如果您愿意,可以计算路线响应边界的并集,并使地图适合该地图。
var bounds = new google.maps.LatLngBounds();
routes.forEach(function(route) {
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer({preserveViewport: true});
display.setMap(map);
display.setDirections(body);
bounds.union(body.routes[0].bounds);
map.fitBounds(bounds);
});
});
代码段
var $canvas = document.querySelector('#map');
var map = new google.maps.Map($canvas, {
center: new google.maps.LatLng(52.46004869999999, 13.37898690),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 14
});
var routes = [{
origin: new google.maps.LatLng(52.459281, 13.356367),
destination: new google.maps.LatLng(52.455833, 13.322948),
travelMode: google.maps.TravelMode.BICYCLING
},
{
origin: new google.maps.LatLng(52.597621, 13.430536),
destination: new google.maps.LatLng(52.5918799, 13.2832929),
travelMode: google.maps.TravelMode.BICYCLING
}
];
var bounds = new google.maps.LatLngBounds();
routes.forEach(function(route) {
new google.maps.DirectionsService().route(route, function(body) {
var display = new google.maps.DirectionsRenderer({
preserveViewport: true
});
display.setMap(map);
display.setDirections(body);
bounds.union(body.routes[0].bounds);
map.fitBounds(bounds);
});
});
html,
body,
div#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
答案 1 :(得分:0)
对于我来说,这对我有用:
let directionsService = new google.maps.DirectionsService();
// always pass the `preserveViewport` to maintain the zoom ratio when using directionsRenderer
let directionsRenderer = new google.maps.DirectionsRenderer({map:this.map,preserveViewport: true});
//store the request state in an object ` use 'google.maps.TravelMode.DRIVING' instead of 'DRIVING'`
var request = {
origin: {query:start},
destination: {query:end},
travelMode: google.maps.TravelMode.DRIVING,
};
directionsService.route(request, function (response, status) {
directionsRenderer.setDirections(response);
// const route = request.routes;
})
我不必通过setMap
方法。