在fitBounds調用後增加地圖縮放不起作用

Question

我不知道爲什麼這似乎不起作用。我希望地圖根據圓的邊界設置邊界，但它沒有足夠的放大，並且有太多的填充，所以我嘗試在fitBounds之後增加縮放，並且它什麼都不做。

???

LatLngD和LatLngO是全球性的，在其他地方設置。

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

的谷歌地圖JavaScript API V3是基於事件的。您需要等到新的縮放級別生效後再將其加1。

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

（該addListenerOnce執行的操作一次，然後移除事件偵聽器）

proof of concept fiddle

代碼片斷：

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

這是使用idle事件地圖已初始化後調用它通常完成並正確設置它的界限：

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