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

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

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

Answer 2

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

代码段

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>

在fitBounds调用之后，增加地图缩放功能不起作用

2 个答案: