利用編輯器打開“4-2.使用Google地圖追蹤用戶的位置.html”文件，代碼如下：【代碼4-2】
01 <! DOCTYPE html> 02 < html lang=" en"> 03 < head> 04 < meta http- equiv=" Content- Type" content=" text/ html; charset= utf- 8" />
05 < title> 使用 Google 地圖 追蹤 用戶 的 位置</ title> 06 < style> 07 body{ 08 margin: 50px auto; width: 634px; padding: 20px; border: 1px solid #c88e8e; 09 border- radius: 15px; 10 height: 100%; /* 設(shè)置 高度 自 適應(yīng) */ 11 } 12 #map{ height: 400px; width: 630px; text- align: center;}/* 設(shè)置 地圖 寬 高 */ 13 </ style> 14 </ head> 15 < body> 16 < p> 使用 Google 地圖 追蹤 用戶 的 位置</ p> 17 < p> 當(dāng)前 地理 位置< span id=" info"></ span></ p> 18 < div id=" map"> 加載 中...</ div> <!-- 地圖 顯示 控 件 --> 19 </ body> 20 < script src=" http:// maps. google. com/ maps/ api/ js? sensor= false"></ script> 21 < script> 22 ;(function(){ 23 var 24 gmap = document. getElementById(" map"), // 獲取 地圖 DOM
25 ginfo = document. getElementById(" info"), // 獲取 顯示 經(jīng)緯度 DOM 26 chinapos = new google. maps. LatLng( 35. 86166, 104. 195397), // 設(shè)置 默認(rèn) 中國 地圖 坐標(biāo) 27 map = new google. maps. Map( document. getElementById(" map"), { // google 地圖 實(shí)例 化 28 zoom: 5, 29 center: chinapos, 30 mapTypeId: google. maps. MapTypeId. ROADMAP 31 }), 32 marker = new google. maps. Marker({ position: chinapos, map: map, title: "用戶 位置"}), // 地圖 浮動 提示 33 watchMap = function( position) { 34 var 35 pos = new google. maps. LatLng( position. coords. latitude, position. coords. longitude); // 經(jīng)緯度 36 ginfo. innerHTML = "當(dāng)前 位置（ 緯度：" + position. coords. latitude 37 + "， 經(jīng)度：" + position. coords. longitude + "）"; // 顯示 定位 結(jié)果 38 map. setCenter( pos); 39 map. setZoom( 14); 40 marker. setPosition( pos); // 更新 位置 標(biāo)記 41 drawPath( position. coords); // 根據(jù) 當(dāng)前 經(jīng)緯度
經(jīng)緯度 畫線 42 }, 43 drawPath = function(){ // 畫線 函數(shù) 44 var 45 coordinatesPathArray = [], // 所 監(jiān) 聽到 的 所有 經(jīng)緯度 信息 46 lineOption = { // 畫線 的 配置 選項(xiàng) 47 strokeColor: "#9290f8", // 線 的 顏色 48 strokeOpacity: 0. 5, // 線 的 透明度 49 strokeWeight: 5 // 線 的 精細(xì) 50 }, 51 coordsPath; // 保存 Polyline 的 變量 52 var draw = function( coords){ // 重 繪 函數(shù) 53 coordsPath. setMap( null); // 清除 原 有的 線 54 // 把 新的 位置 信息 加入 到 數(shù)組 中 55 coordinatesPathArray. push( new google. maps. LatLng( coords. latitude, coords. longitude)); 56 lineOption. path = coordinatesPathArray; // 線 的 path 配置 選項(xiàng) 57 coordsPath = new google. maps. Polyline( lineOption); // 利用 Google API 畫線 58 coordsPath. setMap( map); // 在 地圖 上 顯示 出線
59 } 60 lineOption. path = coordinatesPathArray; // 初始化 第 一條 線 61 coordsPath = new google. maps. Polyline( lineOption); // 初始化 Polyline 并 賦值 給 coordsPath 62 return draw; 63 }(), 64 updatePosition = function(){ 65 var 66 errorHandler = function( error){ // 定位 出錯 處理 函數(shù) 67 switch( error. code){ 68 case error. PERMISSION_ DENIED: // 定位 失敗， 沒有 權(quán)限 69 gmap. innerHTML = "定位 被 阻止， 請 檢查 您的 授權(quán) 或者 網(wǎng)絡(luò) 協(xié)議（" + error. message + ")"; 70 break; 71 case error. POSITION_ UNAVAILABLE: // 定位 失敗， 不 可達(dá) 72 gmap. innerHTML = "定位 暫時 無法 使用， 請 檢查 您的 網(wǎng)絡(luò)(" + error. message + ")"; 73 break;
74 case error. TIMEOUT: // 定位 失敗， 超時 75 gmap. innerHTML = "對不起， 定位 超時"; // 超時 了 76 break; 77 } 78 }, 79 getWatchPosition = function(){ // 定位 函數(shù) 80 var watchId = navigator. geolocation. watchPosition( watchMap, errorHandler, {timeout: 1000}); 81 }; 82 return getWatchPosition; // 返回 定位 函數(shù) 供 外部 調(diào)用 83 }(); 84 if (navigator. geolocation) { 85 gmap. innerHTML = "定位 中..."; 86 updatePosition(); // 定位 開始 87 } else { 88 gmap. innerHTML = '您的 瀏覽器 不支持 地理 位置'; // 定位 失敗， 瀏覽器 不支持 89 } 90 }());
91 </ script> 92 </ html>
提示可以開車或者乘坐公交來移動當(dāng)前位置，效果會更好。
.jpg)
