动态更改 google 地图街景位置

Question

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

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

代码片段（来自fiddle）：

"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>

Answer 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

代码片段：

"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>

动态更改 google 地图街景位置

Change google maps street view position dynamically

javascript

google-maps

google-street-view