-
Notifications
You must be signed in to change notification settings - Fork 0
/
travelMessage.html
125 lines (114 loc) · 3.46 KB
/
travelMessage.html
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Travel modes in directions</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#directions-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map-canvas {
margin-right: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var gstart="";
var gend="";
var haight = new google.maps.LatLng(37.7699298, -122.4469157); //start
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205); //end
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
center: haight
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map); //設定於MAP
calcRoute(oceanBeach, haight);
var marker = new google.maps.Marker({
position: oceanBeach,
map: map
});
directionsDisplay.setPanel(document.getElementById('directions-panel'));
}
function calcRoute(start, end) { //for change marker
var selectedMode = document.getElementById('mode').value;//取得交通方式
var request = {
origin: start ,//起點設定
destination: end, //目的設定
travelMode: google.maps.TravelMode[selectedMode] /*設定交通方式*/
};
gstart=start;
gend=end;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
console.log(directionsDisplay);
showTime(directionsDisplay.directions); //log時間
}
});
}
function Route() { //for change transports
var selectedMode = document.getElementById('mode').value;//取得交通方式
var request = {
origin: gstart ,//起點設定
destination: gend, //目的設定
travelMode: google.maps.TravelMode[selectedMode] /*設定交通方式*/
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
showTime(directionsDisplay.directions); //log時間
}
});
}
function showTime(result){
var time= 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
console.log("come is "+myroute.legs[i].duration.text); //text有經過時/分轉換
time +=myroute.legs[i].duration.value; //time 秒為單位
}
console.log("time is "+time);
}
google.maps.event.addDomListener(window, 'load', initialize);
//down is examples
</script>
</head>
<body>
<div id="panel">
<b>交通方式: </b>
<select id="mode" onchange="Route();">
<option value="DRIVING">開車</option>
<option value="WALKING">走路</option>
<option value="BICYCLING">腳踏車</option>
<option value="TRANSIT">公車</option>
</select>
</div>
<div id="directions-panel"></div>
<div id="map-canvas"></div>
</body>
</html>