从 Google 街景中的原始全景图向北行驶

Getting north from raw panorama in Google Street View

我正在项目中使用街景 Javascript Api,我知道如何使用航向使 Google 的全景图指向北方。

现在我还获取了创建此全景图的所有图块,并使用它们创建了 360° 原始全景图像。

但是,我想知道是否有一种方法可以在创建的原始全景图中自动找出北方的位置。

例如,

是否有直接的解决方案?

据我所知,Google 地图 API 尤其是全景视图没有在图像的北部 and/or 南部有箭头的界面,例如你有 post。

这样的解决方案必须由您手动编码才能弄清楚。

Work-around

但是,您可以使用一种解决方法,它利用全景视图并且在界面中有一个 built-in 罗盘。这样,当你四处移动图像时,你总能感觉到南北。

代码和文档

您可以使用以下示例实现此类接口(PS:替换API键!):

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View panoramas</title>
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initPano() {
        // Set up Street View and initially set it visible. Register the
        // custom panorama provider function. Set the StreetView to display
        // the custom panorama 'reception' which we check for below.
        var panorama = new google.maps.StreetViewPanorama(
          document.getElementById('map'), {
            pano: 'reception',
            visible: true,
            panoProvider: getCustomPanorama
        });
      }

      // Return a pano image given the panoID.
      function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
        // Note: robust custom panorama methods would require tiled pano data.
        // Here we're just using a single tile, set to the tile size and equal
        // to the pano "world" size.
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
      }

      // Construct the appropriate StreetViewPanoramaData given
      // the passed pano IDs.
      function getCustomPanorama(pano, zoom, tileX, tileY) {
        if (pano === 'reception') {
          return {
            location: {
              pano: 'reception',
              description: 'Google Sydney - Reception'
            },
            links: [],
            // The text for the copyright control.
            copyright: 'Imagery (c) 2010 Google',
            // The definition of the tiles for this panorama.
            tiles: {
              tileSize: new google.maps.Size(1024, 512),
              worldSize: new google.maps.Size(1024, 512),
              // The heading in degrees at the origin of the panorama
              // tile set.
              centerHeading: 105,
              getTileUrl: getCustomPanoramaTileUrl
            }
          };
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initPano">
    </script>
  </body>
</html>

可在 Custom Street View panoramas 文档页面找到。

我想办法解决了。

在我的项目中,我使用 StreetViewService 从一对 Latitude-Longitude

中获取全景图
sv = new google.maps.StreetViewService();
sv.getPanorama({location: latLng, radius: 50}, updateInfo)

updateInfo(信息、状态)的参数中,我发现 sv.getPanorama 的响应:

info.tiles.centerHeading

这是汽车的行驶方向

现在,如果原始全景图是 360° 视图,我可以使用交叉乘法得到北方所在水平方向的像素,并正确绘制所有基点。

这比我想要的要复杂,但至少现在可以了。