Jak automatycznie obracać panoramę z Google Street View?

Zastanawiasz się jak automatycznie przewijąc panoramę w Google Maps? Poniższy efekt możemy uzyskać w kilka minut.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin:0px;
}
#panorama{
  width: 100%; 
  height: 500px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var   pano;
var   speed = 30; 
var   latlng = new google.maps.LatLng(40.774971,-73.9666061); 
var panoOptions = {
  position: latlng,
  pov: {
    heading: 0,
    pitch: 0
  }
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
  var pov = pano.getPov();
  pov.heading += 0.2;
  pano.setPov(pov);
}, speed);
</script>

Pełny kod: (wersja full screen)

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automatyczna panorma</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin:0px;
}
#panorama{
  width: 100%; 
  height: 100%;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var   pano;
var   speed = 30; 
var   latlng = new google.maps.LatLng(40.774971,-73.9666061); 
var panoOptions = {
  position: latlng,
  pov: {
    heading: 0,
    pitch: 0
  }
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
  var pov = pano.getPov();
  pov.heading += 0.2;
  pano.setPov(pov);
}, speed);
</script>
</body>
</html>

Wyjaśnienia:

latlng – dane GEO naszego punktu

speed – szybkość obracania

headin – określa kąt obrotu wokół położenia kamery (stopnie)

pitch – określa odchylenie kąta „w górę” lub „w dół” (stopnie)

Skrypt można dowolnie modyfikować i umieszczać na swojej stronie.


Sprawdź ofertę

Używamy plików cookie

Nasza strona wykorzystuje pliki cookie, aby poprawić komfort korzystania z niej. Aby dowiedzieć się więcej o plikach cookie, których używamy, zapoznaj się z naszą witryną polityka prywatności.

Prosta polityka prywatności

Poniżej możesz zmienić ustawienia plików cookie nasze i naszych partnerów. Korzystanie przez nas z analitycznych plików cookie wymaga zgody użytkownika.

  • Analityka

    Analityczne pliki cookie służą do zrozumienia, w jaki sposób użytkownicy wchodzą w interakcję z witryną. Te pliki cookie pomagają dostarczać informacji na temat wskaźników liczby odwiedzających, współczynnika odrzuceń, źródła ruchu itp. Głównym celem analityki jest poprawa funkcjonalności witryny lub aplikacji.

    akceptacja
  • Niezbędne pliki cookie

    These cookies are used to provide you with a more personalized experience on our website and to remember choices you make when you use our website. For example, we may use functionality cookies to remember your language preferences or remember your login details.

    wymagany