Collection
Collection
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>谷歌地图 v3</title>
<script src="https://ditu.google.cn/maps/api/js?sensor=true&v=3&language=zh-CN&key=YOU KEY" type="text/javascript"></script>
<script type="text/javascript">
var map;// 地图对象
var directionsService = new google.maps.DirectionsService();
var directionDisplay;
var steps = new Array(), curr_step = null, timer = 0, index = 0, marker = null;
var elapsed = 0;
var pathlength = 0;
var win = new google.maps.InfoWindow();
function init() {
directionsDisplay = new google.maps.DirectionsRenderer();
var coor = new google.maps.LatLng(39.960872,116.271486);
map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: coor, mapTypeControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP });
directionsDisplay.setMap(map);
var request = {
origin: "39.956728,116.275949",
destination: "39.959392,116.299424",
waypoints: [
{location:"39.961497,116.284018",stopover:true},
{location:"39.966464,116.283417",stopover:true},
{location:"39.966925,116.28861",stopover:true},
{location:"39.966464,116.283417",stopover:true},
{location:"39.961497,116.284018",stopover:false}
],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// 获取从“广州市火车站”到“广州市番禺区汉溪长隆”的线路
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
// 第一种显示里程和时间的框
// var legs = response.routes[0].legs;
// if (legs) {
// for (var i = 0; i < legs.length; i++) {
// var ss = legs[i].steps;
// for (var j = 0; j < ss.length; j++) {
// steps.push(ss[j]);
// }
// }
// }
// curr_step = steps.shift();
// timer = window.setInterval(function() {
// if (index >= curr_step.path.length) {
// if (steps.length == 0) {
// clearInterval(timer);
// return;
// }
// index = 0;
// curr_step = steps.shift();
// elapsed += curr_step.duration.value;
// pathlength += curr_step.distance.value;
// win.setContent("里程：" + pathlength + "米，耗时：" + elapsed + "秒");
// }
// var point = curr_step.path[index++]
// if (!marker) {
// marker = new google.maps.Marker({ position: point, map: map });
// win.setPosition(point);
// win.open(map);
// } else {
// marker.setPosition(point);
// win.setPosition(point);
// }
// }, 30);
// 第二种，轨迹回放
path = response.routes[0].overview_path;
if (path) {
timer = window.setInterval(function() {
if (!marker) {
marker = new google.maps.Marker({ position: path[index++], map: map });
} else {
if (index < path.length) {
marker.setPosition(path[index++]);
} else {
index = 0;
window.clearInterval(timer);
}
}
}, 150);//30是运动时间
}
}
});
}
</script>
</head>
<body onload="init();">
<div id="map" style="width:800px; height:800px;"></div>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
