效果

Google街景小车开启了地图与现实结合的大门，也让我们可以利用 Google Maps 浏览全世界的美丽风光。街景车采集的数据简单来说就是加了经纬度的图片，我们也可以利用这些图片来制作街景小动画，上香港示例（大陆没有Google 街景数据）：

movie

Coding

使用 Direction API 进行两地间导航，利用 Street View API 将街景图片预加载，使用了 Hyperlaps.js，Hyperlapse.js依赖 GSVPano 和 three 两个 js 库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html> 
<head> 
	<title>Simple Example</title> 
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript"></script> 
	<script src="js/three.min.js"></script>
	<script src="js/GSVPano.js"></script>
	<script src="js/Hyperlapse.js"></script>
	
	<script> 
		function init() {
			var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
				lookat: new google.maps.LatLng(37.81409525128964,-122.4775045005249),
				zoom: 1,
				use_lookat: true,
				elevation: 50
			});
			hyperlapse.onError = function(e) {
				console.log(e);
			};
			hyperlapse.onRouteComplete = function(e) {
				hyperlapse.load();
			};
			hyperlapse.onLoadComplete = function(e) {
				hyperlapse.play();
			};
			// Google Maps API stuff here...
			var directions_service = new google.maps.DirectionsService();
			//设置起始点，进行导航
			var route = {
				request:{
					origin: new google.maps.LatLng(22.2962259,114.1724561),
					destination: new google.maps.LatLng(22.3025739,114.1720511),
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				}
			};
			directions_service.route(route.request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					hyperlapse.generate( {route:response} );
				} else {
					console.log(status);
				}
			});
		}
		window.onload = init;
		
	</script> 
</head> 
<body> 
	<div id="pano"></div>
</body> 
</html>

Git 仓库

https://github.com/alphayang/hongkong_fast_street_view

更多

新车试驾，旅游规则，展览。。。

Tips

加载 maps api 需科学上网，加载图片时间视需下载街景图片数据而不同，由于是全部下载完成再开始播放，需要些耐心。
由于国内 google maps api 还没有街景资源，此处不能用使用国内http://www.google.cn/maps/api/js