问题
When I'm loading a Google Map (v3) with Directions into a div that is hidden from the user, the resulting map is not zoomed and centered correctly. I tried firing a resize
event but that did only partially solve the problem.
Usually when loading a map with directions, the API automatically finds the optimal view (ie. zoom level and center) as to show the entire journey. Any ideas what I'm doing wrong?
Please see JsFiddle
<button id="show">Show</button>
<div id="a">
<div id="map_wrapper" style="display:none">
<div id="map_canvas" style="height: 354px; width:713px;"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsService,
directionsDisplay,
map;
function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
var start = 'New York, NY';
var end = 'Chicago, IL';
var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING };
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</div>
And the javascript:
$(document).ready(function(e) {
$('#show').on('click', function() {
$('#map_wrapper').show();
google.maps.event.trigger(map, "resize");
});
});
回答1:
Modify the ready-function as follows:
$(document).ready(function(e) {
$('#show').on('click', function() {
$('#map_wrapper').show();
google.maps.event.addListenerOnce(map, "resize",function(){
try{this.fitBounds(directionsDisplay.getDirections().routes[0].bounds)
}catch(e){}
});
google.maps.event.trigger(map, "resize");
});
});
It will , when a route is available inside the map, set the bounds of the map to the bounds of the route.
Demo: http://jsfiddle.net/doktormolle/c2pC3/
回答2:
You can initialize map after button click: remove callback, сall initialize()
on button click. http://jsfiddle.net/mB6AZ/2/
回答3:
Save a copy of the DirectionsRoute LatLngBounds and then fit the map to those bounds once it has been resized.
Working Demo
var bounds;
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
bounds = response.routes[0].bounds;
}
});
$(document).ready(function (e) {
$('#show').on('click', function () {
$('#map_wrapper').show(0, function () {
// this will fire once the map resize completes
google.maps.event.addListenerOnce(map, 'idle', function () {
this.fitBounds(bounds);
});
google.maps.event.trigger(map, "resize");
});
});
});
来源:https://stackoverflow.com/questions/14263472/how-to-show-google-maps-directions-in-tabs-or-div-that-has-displaynone