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.