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

Question

我试图设置边界以便它们不会超过叠加图像，但即使我已将它们正确地设置到imageBounds，它仍然似乎有点超出边界。我怎样才能计算出正确的界限？

＆＃13;

＆＃13;

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(
  'http://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));
  });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

注意：拖动有一些惯性，因此地图仍然可以在边界上稍微拖动，但它会返回到边界。

代码段

＆＃13;

＆＃13;

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(
  'http://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));
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;