我想要一张柏林的大 map ,您可以从中看到多条路线。不幸的是,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);
});
});
http://jsfiddle.net/H3GE3/2/
最佳答案
使用 preserveViewport option of the DirectionsRenderer以防止自动缩放到路线,然后设置您喜欢的视口(viewport)。
{preserveViewport: true}
或者,如果您愿意,计算方向响应边界的并集,并将 map 拟合到该值。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);
});
});
proof of concept fiddle代码片段:
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
关于google-maps - 渲染方向时不要更改 map 中心或缩放级别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18085305/