计算静态谷歌地图图像的边界框

Question

假设我从谷歌静态地图 API 请求此图像

https://maps.googleapis.com/maps/api/staticmap?center=52.591370,-2.110748&zoom=18&size=600x600&maptype=satellite&markers=color:blue|52.591370,-2.110748

我得到一个以 52.591370,-2.110748 为中心的 600px x 600px 图像。给定中心、图像大小和缩放级别，如何计算 lat lng 坐标中图像的边界框。更具体地说，如何计算左下角和右上角的纬度/经度。

我做了一些研究并查看了墨卡托投影，但文章不断提到瓷砖尺寸，这与本例无关。

有人可以帮忙吗？

Answer 1

我可以解释如何使用 Maps JavaScript API 计算边界框的东北点和西南点。

您有一个中心位置，并且知道从中心到东北和西南的距离在两个轴上都是 300 像素。

看一下下面计算 NE 和 SW 点的代码

var map;
function initMap() {
  var latLng = new google.maps.LatLng(52.591370, -2.110748);

  map = new google.maps.Map(document.getElementById('map'), {
      center: latLng,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  var marker = new google.maps.Marker({
      position: latLng,
      map: map
  });

  google.maps.event.addListener(map, "idle", function() {
      //Verical and horizontal distance from center in pixels
      var h = 300;
      var w = 300;

      var centerPixel = map.getProjection().fromLatLngToPoint(latLng);
      var pixelSize = Math.pow(2, -map.getZoom());

      var nePoint = new google.maps.Point(centerPixel.x + w*pixelSize, centerPixel.y - h*pixelSize);
      var swPoint = new google.maps.Point(centerPixel.x - w*pixelSize, centerPixel.y + h*pixelSize);

      var ne = map.getProjection().fromPointToLatLng(nePoint);
      var sw = map.getProjection().fromPointToLatLng(swPoint);

      var neMarker = new google.maps.Marker({
        position: ne,
        map: map,
        title: "NE: " + ne.toString()
      });

      var swMarker = new google.maps.Marker({
        position: sw,
        map: map,
        title: "SW: " + sw.toString()
      });

      var polygon = new google.maps.Polygon({
          paths: [ne, new google.maps.LatLng(ne.lat(),sw.lng()), sw, new google.maps.LatLng(sw.lat(),ne.lng())],
          map: map, 
          strokeColor: "green"
      });

      console.log("NE: " + ne.toString());
      console.log("SW: " + sw.toString());

  });
}

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=geometry&callback=initMap"
    async defer></script>

您也可以在 jsbin 中看到此示例：http ://jsbin.com/jahocos/edit?html,output

希望这可以帮助！