如何使用 Google Maps Javascript 将位置和缩放级别转换为 LatLngBounds？答案

【问题标题】：How to convert Position and Zoom Level to LatLngBounds with Google Maps Javascript?如何使用 Google Maps Javascript 将位置和缩放级别转换为 LatLngBounds？
【发布时间】：2020-07-10 20:42:50
【问题描述】：

我开始实施一个网络解决方案，以在谷歌地图上显示 GroundOverlay。在 IOS 和 Android 中，可以添加具有中心、图像和缩放级别的 GroundOverlay，但在 Javascript 中是不可能的。

那么将位置 (Lat, Lng) 转换为bound ((Lat,Lng),(Lat,Lng)) 的数学解决方案是什么？

这是我所拥有的：

中心位置（纬度、经度）
图片网址
缩放级别
谷歌地图

【问题讨论】：

您没有足够的信息来计算问题的界限。如果您希望 GroundOverlay 填充地图的边界，您可以从缩放级别和中心获取那些（返回值将取决于 map div 的大小和形状）
你说得对，我把谷歌地图加进去了。
@geocodezip 我正在寻找这个。你知道我怎样才能得到这个吗？

标签： javascript google-maps

【解决方案1】：

我找到了一个主要受This answer启发的解决方案。

function getImageDimensions(imageUrl: string): Observable<{ width: number, height: number }> {
  return new Observable(observer => {
    let image = new Image();
    image.onload = function (event) {
      let loadedImage: any = event.currentTarget;
      observer.next({
        width: loadedImage.width,
        height: loadedImage.height
      });
      observer.complete();
    }
    image.src = imageUrl;
  });
} 



getImageDimensions(imageUrl: string, zoomLevel:number, center: google.maps.LatLng, map: google.maps.Map).subscribe(dimensions => {
  let projection = map.getProjection();
  let zoom = Math.pow(2, zoomLevel) * 2;
  let width = dimensions.width / zoom;
  let height = dimensions.height / zoom;
  let containerPixel = projection.fromLatLngToPoint(center);

  var result = new google.maps.LatLngBounds(
    projection.fromPointToLatLng(
      new google.maps.Point(containerPixel.x - width, containerPixel.y + height)
    ),
    projection.fromPointToLatLng(
      new google.maps.Point(containerPixel.x + width, containerPixel.y - height)
    )
  );
  console.log(result);
});

【讨论】：