不使用座標：地址<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>
效果：
