javascript - 在谷歌地图中设置平移边界等于图像叠加

Question

我正在尝试设置边界，以便它们不会超出覆盖图像，但是即使我已将它们正确设置为 imageBounds，它似乎仍然有点超出了边界。我怎样才能计算出正确的界限？

var currentMarker;

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.740, lng: -74.18},
    zoom : 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    minZoom: 15,
    maxZoom: 15
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };
  historicalOverlay = new google.maps.GroundOverlay(
  '/image/0mgx2.jpg',
  imageBounds);
  historicalOverlay.setMap(map);




  var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.712216, -74.22655),
    new google.maps.LatLng(40.773941, -74.12544)
  );

  // Listen for the dragend event
  google.maps.event.addListener(map, 'bounds_changed', function() {
    if (strictBounds.contains(map.getCenter())) return;

    // We're out of bounds - Move the map back within the bounds

    var c = map.getCenter(),
        x = c.lng(),
        y = c.lat(),
        maxX = strictBounds.getNorthEast().lng(),
        maxY = strictBounds.getNorthEast().lat(),
        minX = strictBounds.getSouthWest().lng(),
        minY = strictBounds.getSouthWest().lat();

    if (x < minX) x = minX;
    if (x > maxX) x = maxX;
    if (y < minY) y = minY;
    if (y > maxY) y = maxY;

    map.setCenter(new google.maps.LatLng(y, x));
  });

#mapContainer {
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right:  0px;
  margin-bottom:  0px;
  margin-top:  0px;
  position: relative;

}

#map {
  height: 100%;
}

html, body {
  height:100%;
  width: 100%;
  margin-left: 0px;
  margin-right:  0px;
  margin-bottom:  0px;
  margin-top:  0px;
  overflow:hidden;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="mapContainer">

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

Answer 1

您需要计算将浏览器视口(viewport)的边缘保持在图像边界内所需的边界。

新的“严格”边界计算为图像边界减少视口(viewport)高度的一半和每侧视口(viewport)宽度的一半。它使用 MapCanvasProjection 的 fromLatLngToContainerPixel 和 fromLatLngToContainerPixel 方法。类。

var windowWidth = window.innerWidth || d.documentElement.clientWidth || d.getElementsByTagName('body')[0].clientWidth;
var windowHeight = window.innerHeight || d.documentElement.clientHeight || d.getElementsByTagName('body')[0].clientHeight;

// calculate the new SW corner
var newSWpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getSouthWest());
newSWpt = new google.maps.Point((newSWpt.x + (windowWidth / 2)), (newSWpt.y - (windowHeight / 2)));
var newSW = overlay.getProjection().fromContainerPixelToLatLng(newSWpt);

// calculate the new NE corner
var newNEpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getNorthEast());
newNEpt = new google.maps.Point((newNEpt.x - (windowWidth / 2)), (newNEpt.y + (windowHeight / 2)));
var newNE = overlay.getProjection().fromContainerPixelToLatLng(newNEpt);
var newStrictBounds = new google.maps.LatLngBounds(newSW, newNE);

注意:拖动存在一定的惯性，因此 map 仍然可以稍微拖动到边界上方，但会返回到边界。

代码片段:

var currentMarker;

var map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 40.740,
    lng: -74.18
  },
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  minZoom: 15,
  maxZoom: 15
});
var imageBounds = {
  north: 40.773941,
  south: 40.712216,
  east: -74.12544,
  west: -74.22655
};
historicalOverlay = new google.maps.GroundOverlay(
  '/image/0mgx2.jpg',
  imageBounds);
historicalOverlay.setMap(map);


var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var strictBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(imageBounds.south, imageBounds.west),
  new google.maps.LatLng(imageBounds.north, imageBounds.east)
);

// Listen for the dragend event
google.maps.event.addListener(map, 'bounds_changed', function() {

  var windowWidth = window.innerWidth || d.documentElement.clientWidth || d.getElementsByTagName('body')[0].clientWidth;
  var windowHeight = window.innerHeight || d.documentElement.clientHeight || d.getElementsByTagName('body')[0].clientHeight;

  var newSWpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getSouthWest());
  newSWpt = new google.maps.Point((newSWpt.x + (windowWidth / 2)), (newSWpt.y - (windowHeight / 2)));
  var newSW = overlay.getProjection().fromContainerPixelToLatLng(newSWpt);
  var newNEpt = overlay.getProjection().fromLatLngToContainerPixel(strictBounds.getNorthEast());
  newNEpt = new google.maps.Point((newNEpt.x - (windowWidth / 2)), (newNEpt.y + (windowHeight / 2)));
  var newNE = overlay.getProjection().fromContainerPixelToLatLng(newNEpt);
  var newStrictBounds = new google.maps.LatLngBounds(newSW, newNE);

  if (newStrictBounds.contains(map.getCenter())) return;

  // We're out of bounds - Move the map back within the bounds

  var c = map.getCenter(),
    x = c.lng(),
    y = c.lat(),
    maxX = newStrictBounds.getNorthEast().lng(),
    maxY = newStrictBounds.getNorthEast().lat(),
    minX = newStrictBounds.getSouthWest().lng(),
    minY = newStrictBounds.getSouthWest().lat();

  if (x < minX) x = minX;
  if (x > maxX) x = maxX;
  if (y < minY) y = minY;
  if (y > maxY) y = maxY;

  map.setCenter(new google.maps.LatLng(y, x));
});

#mapContainer {
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  position: relative;
}
#map {
  height: 100%;
}
html,
body {
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  overflow: hidden;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="mapContainer">

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