Как соответствовать Границы GroundOverlay Google Maps API более тесно - PullRequest
Новая
       35

Как соответствовать Границы GroundOverlay Google Maps API более тесно

0 голосов
/ 27 марта 2020

Я создал GroundOverlay, который использует Google Maps API. Я бы хотел, чтобы земля как можно лучше подходила. Я также пытался использовать опцию padding или zoom++, но она не работает, как я ожидал.

Ток:

enter image description here

Ожидаемое:

enter image description here

Повторное производство: https://jsfiddle.net/abinhho/5kvtfpeo/10/

1 Ответ

1 голос
/ 27 марта 2020

Проблема довольно проста для понимания. 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>
...