将 Google 地图 (v3) LatLngBounds 扩展一定数量的像素

Question

我希望获取当前的地图边界（如下所示：

var b = map.getBounds();

）并在每个方向上将其扩展一定数量的像素。本质上我希望将边界填充 256px。这可能吗？

Answer 1

您可以尝试以下方法：

var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 
var projection = overlay.getProjection();  
// Get pixels:    
var sw = projection.fromLatLngToDivPixel(bounds.getSouthWest());   
var ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());    

另请参阅自定义叠加层。

Answer 2

给出的答案可能有效，但问题是该功能

overlay.getProjection()

在显示地图之前始终返回 undefined。这意味着在地图显示之前您无法扩展边界，然后必须再次显示它 - 更多处理和可能为最终用户带来的短暂体验。

我想我找到了一种按像素扩展边界的方法，它不需要刷新地图，并且可以在渲染地图之前进行计算。它基于这样的事实：边界对象将覆盖地图的宽度，并且我们从其容器中知道地图宽度的像素，因此两者的比率给我们一个经度与像素的比率

                // extend bounds to allow for 250 pixels of label width
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                var lng = ne.lng();
                var diff = lng - sw.lng();
                var newlng = lng + 250 * diff / targetwidth;

                var lat = sw.lat();
                var diff2 = lat - ne.lat;
                var newlat = lat + 100 & diff2 / targetheight;

                var point = new google.maps.LatLng(newlat, newlng);
                bounds.extend(point);

                // fit the map to these bounds
                thismap.fitBounds(bounds);

上面是宽度和高度。如果您只想延长宽度：

                // extend bounds to allow for 250 pixels of label width
                var ne = bounds.getNorthEast();
                var sw = bounds.getSouthWest();
                var lng = ne.lng();
                var diff = lng - sw.lng();
                var newlng = lng + 250 * diff / targetwidth;

                var lat = sw.lat();

                var point = new google.maps.LatLng(newlat, newlng);
                bounds.extend(point);

                // fit the map to these bounds
                thismap.fitBounds(bounds);

在这两种情况下，变量“targetwidth”都是包含地图的 div 的数字宽度（以像素为单位）。

哈:)

Answer 3

我知道已经过去四年了，但对于任何正在寻找的人来说，这是我的解决方案：

/**
 * Calculate the needed coordinates to create square bounds of a certain pixel size around a centerpoint.
 *
 * @param {number} offsetPixels the size of the bounds, in pixels
 * @param {google.maps.LatLng} centerPoint the coordinates for the center of the bounds
 * @param {google.maps.Map} map the map itself
 * @returns {google.maps.LatLngBounds} the coordinates of the surrounding bounds
 *
 * @example
 * // Given a certain point, say
 * const point = new google.maps.LatLng(32, 32);
 *
 * // We want to check if something falls within a 50 by 50 pixel square around that point
 * const bounds = boundsFromPixels(50, point, map);
 * bounds.contains(someCoord);
 **/
function boundsFromPixels(offsetPixels, centerPoint, map) {
  const mapContainer = map.getDiv();
  const mapBounds = map.getBounds();
  const mapSouthWest = mapBounds.getSouthWest();
  const mapNorthEast = mapBounds.getNorthEast();
  // Translate the offset from pixels to longitude or latitude degrees
  // using the ratio of the map's size to the total degrees displayed
  const south = mapSouthWest.lat();
  const north = mapNorthEast.lng();
  const pixelToLatitude = offsetPixels / mapContainer.offsetHeight;
  const latitudeOffset = pixelToLatitude * (north - south);

  const west = mapSouthWest.lng();
  const east = mapNorthEast.lng();
  const pixelToLongitude = offsetPixels / mapContainer.offsetWidth;
  const longitudeOffset = pixelToLongitude * (east - west);

  // Calculate the bounds in degrees - expanded from the center by half the offset
  const centerLatitude = centerPoint.lat();
  const boundsSouth = centerLatitude - latitudeOffset / 2;
  const boundsNorth = centerLatitude + latitudeOffset / 2;

  const centerLongitude = centerPoint.lng();
  const boundsWest = centerLongitude - longitudeOffset / 2;
  const boundsEast = centerLongitude + longitudeOffset / 2;

  const southWestCorner = new google.maps.LatLng(boundsSouth, boundsWest);
  const northEastCorner = new google.maps.LatLng(boundsNorth, boundsEast);

  return new google.maps.LatLngBounds(southWestCorner, northEastCorner);
}