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

【问题标题】：Getting north from raw panorama in Google Street View从 Google 街景中的原始全景图向北行驶
【发布时间】：2016-11-30 21:26:38
【问题描述】：

我在一个项目中使用 Street View Javascript Api，我了解如何使用标题来使 Google 的全景图指向北方。

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

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

例如，

【问题讨论】：

如何创建原始全景图？以及如何获得磁贴列表？
我正在下载 pano_id 的所有图块，并使用 Python 拼接它们。类似于this

标签： javascript google-maps google-street-view

【解决方案1】：

有直接的解决办法吗？

据我所知，Google Maps API 和特别是全景视图没有像您在帖子中那样在图像的北边和/或南边有箭头的界面。

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

解决方法

但是，您可以使用一种解决方法，它利用全景视图并且在界面中具有内置指南针。这样，当您四处移动图像时，您总能感觉到南北在哪里。

代码和文档

你可以使用下面的例子来实现这种类型的接口（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 文档页面找到。

【讨论】：

【解决方案2】：

我设法以某种方式解决了它。

在我的项目中，我使用 StreetViewService 从一对经纬度获取全景图

sv = new google.maps.StreetViewService();
sv.getPanorama({location: latLng, radius: 50}, updateInfo)

在 updateInfo（信息、状态）的参数中，我发现 sv.getPanorama 的响应是：

info.tiles.centerHeading

这是汽车的方向。

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

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

【讨论】：