动态更改Google地图街景位置

问题描述

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

我做错什么了吗？还是可能需要在Google云控制台中进行一些其他设置？任何帮助将不胜感激。

代码段（来自小提琴）：

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

解决方法

新位置返回状态“ 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,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-maps google-street-view javascript

动态更改Google地图街景位置

问题描述

解决方法

相关问答