google-maps - 如何更紧密地拟合Bounds groundOverlay google maps api

Question

我创建了一个使用 Google Maps API 的 groundOverlay。我想让地面尽可能地适合。我也尝试使用padding选项，zoom++但它没有按我预期的那样工作。

当前的：

预期的：

重制：https ://jsfiddle.net/abinhho/5kvtfpeo/10/

Answer 1

这个问题很容易理解。fitBounds()将使地图适合给定的边界，并确保整个边界在地图视口中可见。因此它将选择最佳缩放级别（和中心点）来实现这一目标。

它可能会以良好的边距显示，但如果再放大一个级别，它将不再适合。试试下面的例子。

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.740, lng: -74.18},
    zoomControl: true
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };
  
  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
      
  historicalOverlay.setMap(map);
  
  map.fitBounds(historicalOverlay.getBounds());
}

#map {
  height: 220px;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

你唯一能做的就是使用padding接口，也许是负值。但是你可能会得到相反的结果；图像可能无法完全显示。

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.740, lng: -74.18},
    zoomControl: true
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };
  
  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
      
  historicalOverlay.setMap(map);
  
  map.fitBounds(historicalOverlay.getBounds(), {'bottom': -50, 'left': -50, 'top': -50, 'right': -50});
}

#map {
  height: 180px;
}

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>