不使用坐标：地址<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="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var map;// 地图对象
var directionsService = new google.maps.DirectionsService();
var directionDisplay;
var path = null,timer = 0,index = 0,marker = null;
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: "北京市南坞",//起始上班地点
destination: "北京市人民大学",//结束上班地点
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// 获取从“北京市南坞”到“北京市人民大学”的线路
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
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);
}
}
}, 30);//30是运动时间
}
}
});
}
</script>
</head>
<body οnlοad="init();">
<div id="map" style="width:800px; height:800px;"></div>
</body>
</html>
效果：
使用坐标：
代码：
<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="http://maps.google.com/maps/api/js?v=3.1&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var map;// 地图对象
var directionsService = new google.maps.DirectionsService();
var directionDisplay;
var path = null,timer = 0,index = 0,marker = null;
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",//结束上班地点 （北京市人民大学坐标）
//waypoint 包括以下字段：
//•location（必需）指定路标的地址。
//•stopover（可选）指示此路标是路线上的实际停留点 (true)，还是仅为通过指定位置 (false) 的路线首选项。默认情况下，中途停留为 true。
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
};
/*
Google Maps API 需要调用外部服务器，因此，对路线服务的访问是异步的。为此，您需要传递一个回调方法，以在请求完成后执行。此回调方法将会对结果进行处理。请注意，路线服务可能以单独 routes[] 数组的形式传回多个可能的行程。
要在 V3 中使用路线，请创建一个类型为 DirectionsService 的对象，并调用 DirectionsService.route() 向路线服务发送一条请求，方法是为其传递一个 DirectionsRequest 对象常量，其中包含输入项和一个回调方法，该回调方法将会在收到响应后执行。
DirectionsRequest 对象常量包含下列字段：
{ origin: LatLng | String, destination: LatLng | String, travelMode: TravelMode, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String }下面对这些字段进行了说明：
•origin（必需）指定计算路线时所用的起始地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。
•destination（必需）指定计算路线时所用的结束地点。该值可以指定为 String（如“Chicago, IL”），也可以指定为 LatLng 值。
•travelMode（必需）指定计算路线时所用的交通方式。在下面的出行方式中指定有效值。
•unitSystem（可选）指定显示结果时使用的单位制。在下面的单位制中指定有效值。
•waypoints[]（可选）指定 DirectionsWaypoint 数组。路标将通过让路线经过指定地点而改变路线。将路标指定为带有如下字段的一个对象常量：
◦location 将要进行地址解析的路标地点指定为 LatLng 或 String。
◦stopover 是一个布尔值，用于指示路标是否为路线上的停留点，这可以将这条路线分为两条路线。
（有关路标的详细信息，请参见下文的在路线中使用路标。）
•optimizeWaypoints（可选）指定可以优化使用所提供 waypoints 的路线，以提供尽可能短的路线。如果为 true，路线服务将在 waypoint_order 字段中传回重新排序的 waypoints。（有关详细信息，请参见下文的在路线中使用路标。）
•provideRouteAlternatives（可选）设置为 true 时，指定路线服务可以在响应中提供多条备选路线。请注意，提供备选路线可能增加服务器的响应时间。
•avoidHighways（可选）设置为 true 时，表示计算的路线应避开主要公路（如果可能）。•avoidTolls（可选）设置为 true 时，表示计算的路线应避开收费道路（如果可能）。•region（可选）指定区域代码，该区域代码指定为 ccTLD（“顶级域”）双字符值。（有关详细信息，请参见下文的区域偏向。）
*/
// 获取从“北京市南坞”到“北京市人民大学”的线路
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
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);
}
}
}, 30);//30是运动时间
}
}
});
}
</script>
</head>
<body οnlοad="init();">
<div id="map" style="width:800px; height:800px;"></div>
</body>
</html>
效果：
