将谷歌地图中的平移边界设置为图像覆盖

Setting pan Bounds in google maps equal to image overlay

本文关键字：设置 图像 覆盖 边界 谷歌地图      更新时间：2023-09-26

我正在尝试设置边界，这样它们就不会超过覆盖图像，然而，即使我已经将它们正确地设置为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(
  'https://i.stack.imgur.com/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>

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

新的"严格"边界计算为图像的边界，每侧减少视口高度的一半和视口宽度的一半。它使用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);

注意：拖动有一定的惯性，因此贴图仍然可以稍微拖动过边界，但它会返回到边界。

代码片段：

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(
  'https://i.stack.imgur.com/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>

相关文章：