如何 fitBounds groundOverlay google maps api 更紧密

Question

我创建了一个使用 Google 地图 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>

如何 fitBounds groundOverlay google maps api 更紧密

How to fitBounds groundOverlay google maps api more closely

google-maps

google-maps-api-3

fitbounds