javascript - 如何自动旋转街景全景图？

Question

如何使用 API 自动旋转街景全景图？

像这个谷歌画廊。

Answer 1

您可以通过在每个时间间隔更改标题来使用 JavaScript 计时器 (window.setInterval) 进行旋转。这是一个简单的示例：使用 Google 地图旋转街景全景

Answer 2

要更改全景角度，您必须更改Point-of-View参数，即heading。
此变量以度为单位（0 为北，90 为东，...）。

给定一个包含全景图的变量：

const panorama = new google.maps.StreetViewPanorama(container, opts);

获取全景 POV getPov：

const oldPov = panorama.getPov();

然后用新值替换 POV：

panorama.setPov({
  header : oldPov.header + 1,
  pitch  : oldPov.pitch
});

这会将视点顺时针旋转一度。现在你只需要使用setInterval让这段代码自动重复：

let rotation = 1,   // In degrees
    interval = 100; // In milliseconds

const rotateId = setInterval(() => {
  const oldPov = panorama.getPov();
  panorama.setPov({
    header : oldPov.header + rotation,
    pitch  : oldPov.pitch
  });
}, interval);

（setInterval需要一个函数传递给它，在这种情况下它是一个箭头函数）

请注意，上面的内容可能看起来很紧张。
降低interval将使其更新更快，但可能会降低性能。
增加rotation将使它转动得更快。
摆弄这两个值，你应该得到你想要的。

为了阻止它，

clearInterval(rotateId);