第03行和第07行設計的輸入框可以讓用戶自己輸入路線查找的起始位置或者結(jié)束位置。第04行和第08行定義用戶可以選擇以當前位置作為起始或者結(jié)束位置。第12～17行定義了4種出行方式，分別為：
TRANSIT：公交。
DRIVING：駕車。
BICYCLING：自行車。
WALKING：步行。01 var 02 gmap = document. querySelector("# map"), // 獲取 地圖 DOM 03 ginfo = document. querySelector("# info"), // 獲取 顯示 經(jīng)緯度 DOM 04 origin = document. querySelector("# origin"), // 獲取 起始 位置 輸入 DOM 05 destination = document. querySelector("# destination"),// 獲取 結(jié)束 位置 輸入 DOM 06 userOrigin = document. querySelector("# user- origin"),
// 獲取 使用 當前 作為 起始 位置 DOM 07 userDestination = document. querySelector("# user- destination"), // 獲取 使用 當前 作為 結(jié)束 位置 DOM 08 travelMode = document. querySelector("# travelMode"), // 獲取 出行 方式 DOM 09 search = document. querySelector("# search"), // 獲取 查找 按鈕 DOM 10 directionsPanel = document. querySelector("# directionsPanel"), // 獲取 文字 結(jié)果 DOM 11 map, // 定義 Google 地圖 變量 12 currentMaker, // 定義 當前 位置 標記 13 currentPosition, // 定義 當前 位置 信息 14 directionsService= new google. maps. DirectionsService(),// 初始化 獲取 路線 服務 15 directionsDisplay = new google. maps. DirectionsRenderer(),// 初始化 顯示 路線 服務 16 showMap = function( position) {
17 currentPosition = new google. maps. LatLng( position. coords. latitude, position. coords. longitude); // 經(jīng)緯度 18 // 地圖 參數(shù) 19 var options = { zoom: 14, center: currentPosition, mapTypeId: google. maps. MapTypeId. ROADMAP }; 20 map = new google. maps. Map( gmap, options), // 地圖 21 // 地圖 位置 標記 22 currentMaker = new google. maps. Marker({ position: currentPosition, map: map, title: " 用戶 位置 "}); 23 ginfo. innerHTML = "{ 當前 位置（ 緯度： " + position. coords. latitude 24 + " ，經(jīng)度： " + position. coords. longitude + " ） }";// 顯示 定位 結(jié)果 25 directionsDisplay. setMap( map); // 地圖 上 顯示 路線 26 directionsDisplay. setPanel( directionsPanel);
// 顯示 路線 查找 文字 結(jié)果 27 }, 28 userSelectionCurrent = function( e){ // 設置 當前 位置 作為 查找 點 29 var prev = this. previousElementSibling; // 獲取 input 元素 30 prev. value = ' 我的 位置 '; // 設置 input 元素 的 值 31 prev. style. color = 'blue'; // input 元素 字體 設置 為 藍色 32 prev. isCurrent = true; // 設置 input 使用 當前 位置 來 計算 33 }, 34 cancelCurrent = function(){ 35 this. style. color = '#111'; // 設置 input 元素 字體 顏色 為 #111 36 this. isCurrent = false; // 設置 不使 用 當前 位置 作為 查找 點 37 }, 38 bind = function(){
39 [userOrigin, userDestination]. forEach( function (item){ 40 item. addEventListener(' click', userSelectionCurrent, false); // 綁 定使 用 當前 位置 的 點擊 事件 41 // 如果 input 元素 的 值 是 人為 改變 的， 就 設置 不使 用 當前 位置 作為 查找 點 42 item. previousElementSibling. addEventListener(' change', cancelCurrent, false); 43 }); 44 search. addEventListener(" click", calcRoute, false);// 綁 定 查找 按鈕 事件 45 }, 46 calcRoute = function(){ // 路線 查找 函數(shù) 47 var 48 start = origin. isCurrent ? currentPosition : origin. value, // 獲取 路線 的 起始 位置
49 end = destination. isCurrent ? currentPosition : destination. value, // 獲取 路線 的 結(jié)束 位置 50 selectedMode = travelMode. value, // 獲取 路線 的 出行 方式 51 request = { // 封裝 route 函數(shù) 參數(shù) 52 origin: start, 53 destination: end, 54 travelMode: google. maps. TravelMode[ selectedMode] 55 }; 56 // 調(diào)用 Google 地圖 API 請求 路線 57 directionsService. route( request, function( response, status) { 58 if (status == google. maps. DirectionsStatus. OK) { // 找到 路線 59 directionsPanel. innerHTML = ''; // 清除 文字 結(jié)果 60 directionsPanel. style. color = ''; // 清除
清除 文字 結(jié)果 顏色 61 directionsDisplay. setMap( map); // 在 地圖 上 顯示 路線 62 directionsDisplay. setDirections( response); // 顯示 文字 結(jié)果 63 currentMaker. setMap( null); // 清除 位置 標記 64 }else{ 65 directionsPanel. style. color = 'red'; 66 // 沒有 找到 路線 67 if( status === google. maps. DirectionsStatus. ZERO_ RESULTS){ 68 // 自行車 查找 的 特殊 處理 69 if( selectedMode === 'BICYCLING'){ 70 directionsPanel. innerHTML =' 沒有 找到 路線， 可能 是 不支持 當前 國家 '; 71 }else{ 72 directionsPanel. innerHTML = ' 沒有 找到 相關 路線 ';
73 } 74 }else if( status == google. maps. DirectionsStatus. NOT_ FOUND){ 75 directionsPanel. innerHTML = ' 地址 沒有 找到 '; 76 }else{ 77 directionsPanel. innerHTML = ' 其他 錯誤： ' + status; 78 } 79 directionsDisplay. setMap( null); // 清除 上一次 顯示 的 路線 80 currentMaker. setMap( map); // 顯示 當前 的 位置 標記 81 } 82 }); 83 }, 84 getPosition = function(){ 85 var
86 errorHandler = function( error){ // 定位 出錯 處理 函數(shù) 87 switch( error. code){ 88 case error. PERMISSION_ DENIED: // 定位 失敗， 沒有 權(quán)限 89 gmap. innerHTML = " 定位 被 阻止， 請 檢查 您的 授權(quán) 或者 網(wǎng)絡 協(xié)議（ " + error. message + ")"; 90 break; 91 case error. POSITION_ UNAVAILABLE: // 定位 失敗， 不 可達 92 gmap. innerHTML = " 定位 暫時 無法 使用， 請 檢查 您的 網(wǎng)絡 (" + error. message + ")"; 93 break; 94 case error. TIMEOUT: // 定位 失敗， 超時 95 gmap. innerHTML = " 您的 網(wǎng)絡 較慢， 請 耐心 等待 ..."; 96 gmap. innerHTML = " 對不起， 定位 超時 "; //
超時 了 97 break; 98 } 99 }, 100 getCurrentPosition = function(){ // 定位 函數(shù) 101 navigator. geolocation. getCurrentPosition( showMap, errorHandler); 102 }; 103 return getCurrentPosition; // 返回 定位 函數(shù) 供 外部 調(diào)用 104 }(); 105 var init = function(){ 106 if (navigator. geolocation) { 107 gmap. innerHTML = " 定位 中 ..."; 108 getPosition(); // 定位 開始
109 bind(); 110 } else { 111 gmap. innerHTML = ' 您的 瀏覽器 不支持 地理 位置 '; // 定位 失敗， 瀏覽器 不支持 112 } 113 }; 114 google. maps. event. addDomListener( window, 'load', init); // 入口 函數(shù)
第21行<divid="directionsPannel">元素的作用是把路線查找的文字結(jié)果顯示在這里。JavaScript邏輯代碼部分如下：
