Tag: google street view

2
lis

Automatyczne obracanie panoramy [Google Maps]

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.

We use cookies

Our website uses cookies to improve your experience. To find out more about the cookies we use please see our privacy policy.

Simple privacy policy

You can change our and our partners cookie settings below. Our use of analytics cookies requires your consent

  • Analytics

    Analytical cookies are used to understand how users interact with the site website. These cookies help provide information about visitor count metrics, rejection rate, source of traffic, etc. The primary purpose of analytics is to improve the functionality of a site or application.

    accept
  • Necessary cookies

    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.

    required