动态更改谷歌地图街景位置答案

【问题标题】：Change google maps street view position dynamically动态更改谷歌地图街景位置
【发布时间】：2020-08-13 15:09:40
【问题描述】：

我正在使用谷歌地图街景，我需要在位置上更改全景图，方法与创建时相同。我正在尝试使用google.maps.StreetViewPanorama 实例的setPosition({lat: -34, lng: 151}) 方法来做到这一点，但这没有用。我创建了小提琴，它基本上是谷歌地图街景并排小提琴的副本，唯一的区别是我尝试在 2 秒后更改位置：https://jsfiddle.net/corecode1/zf0jsL7g/。

我做错了吗？或者它可能需要在谷歌云控制台中进行一些额外的设置？任何帮助将不胜感激。

代码 sn-p（来自小提琴）：

"use strict";

function initialize() {
  const fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    }
  );
  map.setStreetView(panorama);
  
  setTimeout(() => {
      
    const newPosition = new google.maps.LatLng({lat: -34, lng: 151});
    panorama.setPosition({lat: -34, lng: 151});
  
  }, 2000);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
  </body>
</html>

【问题讨论】：

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

【解决方案1】：

新位置返回“ZERO_RESULTS”状态。如果你改用(-34.002223, 150.994098)，它就可以工作。

一旦失败，它似乎就不起作用了。

这可行（如果您不先加载失败的位置）：

setTimeout(() => {
  const newPosition = new google.maps.LatLng({lat: -34.002223, lng: 150.994098});
  panorama.setPosition(newPosition);
  map.setCenter(newPosition);
}, 4000);

proof of concept fiddle

代码 sn-p：

"use strict";

function initialize() {
  const fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"), {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    }
  );
  map.setStreetView(panorama);
  google.maps.event.addListenerOnce(panorama, 'position_changed', function() {
    console.log(panorama.getPosition().toUrlValue(6));
  })
  google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
    console.log(panorama.getStatus());
  })
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34,
      lng: 151
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 6000);
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34.002223,
      lng: 150.994098
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 4000);
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34.002223,
      lng: 150.994098
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 8000);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Street View split-map-panes</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
  <div id="pano"></div>
</body>

</html>

【讨论】：

成功了，非常感谢！很明显，如果那里不可用，街景将不会显示。应该知道 :) 我想我会寻找一种方法来更新位置，即使在位置丢失之后，因为在我的应用程序中这是完全可能的。
看看街景服务。