fitBounds 调用后增加地图缩放不起作用答案

【问题标题】：Increase map zoom doesn't work after fitBounds callfitBounds 调用后增加地图缩放不起作用
【发布时间】：2016-07-07 14:19:01
【问题描述】：

我不知道为什么这似乎不起作用。我希望地图根据圆圈的边界设置边界，但它没有足够放大并且填充太多，所以我尝试在 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);
}

【问题讨论】：

标签： javascript jquery google-maps-api-3

【解决方案1】：

Google Maps Javascript API v3 是基于事件的。您需要等到新的缩放级别生效后再将其递增一。

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

（addListenerOnce 执行一次操作，然后移除事件监听器）

proof of concept fiddle

代码 sn-p：

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

【讨论】：

【解决方案2】：

这通常使用 idle 事件完成，该事件在地图初始化并正确设置其边界后调用：

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

【讨论】：

这确实有效，幸运的是我只希望它在初始加载时增加一，因为地图不会像半径那样不断调整大小并且半径总是会减小，但我仍然没有不明白为什么我所拥有的不起作用。如果在接下来的一个小时内没有人有任何其他建议，我会将其标记为已回答，因为它在我解释的情况下确实有效。