Vergrößern Karte Zoom funktioniert nicht nach fitBounds Anruf

Question

Ich weiß nicht, warum dies nicht zu funktionieren scheint. Ich möchte, dass die Grenzen der Grenzen entsprechend den Grenzen eines Kreises gesetzt werden, aber es wird nicht weit genug hineingezoomt und es gibt viel zu viel Padding, also versuche ich eine Vergrößerung des Zooms nach fitBounds und es tut nichts.

???

LatLngD und LatLngO sind global und werden an anderer Stelle gesetzt.

function initializeMap() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: LatLngO, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControl: false 
    }); 
    setRadius(); 
} 

function setRadius() { 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngO, LatLngD); 
    circle = new google.maps.Circle({ 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: '#FF0000', 
     fillOpacity: 0.35, 
     map: map, 
     center: LatLngO, 
     radius: distance, 
    }); 
    map.fitBounds(circle.getBounds()); 
    map.setZoom(map.getZoom() + 1); 
} 

Answer 1

Die v3 Google Maps Javascript API Ereignis basiert. Sie müssen warten, bis die neue Zoomstufe wirksam wird, bevor Sie sie um eins erhöhen.

map.fitBounds(circle.getBounds()); 
google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
    map.setZoom(map.getZoom() + 1); 
}); 

(Die addListenerOnce führt die Aktion einmal, dann der Ereignis-Listener entfernt)

proof of concept fiddle

Code-Schnipsel:

var LatLngO = new google.maps.LatLng(42, -72); 
 
var LatLngD = new google.maps.LatLng(42.5, -72.7); 
 

 
function initializeMap() { 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    zoom: 10, 
 
    center: LatLngO, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    zoomControl: false 
 
    }); 
 
    setRadius(); 
 
} 
 

 
function setRadius() { 
 
    var distance = google.maps.geometry.spherical.computeDistanceBetween(LatLngO, LatLngD); 
 
    circle = new google.maps.Circle({ 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 2, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    map: map, 
 
    center: LatLngO, 
 
    radius: distance, 
 
    }); 
 
    map.fitBounds(circle.getBounds()); 
 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
    map.setZoom(map.getZoom() + 1); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initializeMap);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>

Answer 2

Dies wird in der Regel mit dem idle Ereignis durchgeführt, die nach der Karte und gesetzt hat, initialisiert aufgerufen wird seine Grenzen richtig:

var listener = google.maps.event.addListener(map, "idle", function() { 
    map.setZoom(map.getZoom() - 1); 
    google.maps.event.removeListener(listener); 
});