利用编辑器打开“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%; /* 设置 高度 自 适应 */ 11 } 12 #map{ height: 400px; width: 630px; text- align: center;}/* 设置 地图 宽 高 */ 13 </ style> 14 </ head> 15 < body> 16 < p> 使用 Google 地图 追踪 用户 的 位置</ p> 17 < p> 当前 地理 位置< 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"), // 获取 显示 经纬度 DOM 26 chinapos = new google. maps. LatLng( 35. 86166, 104. 195397), // 设置 默认 中国 地图 坐标 27 map = new google. maps. Map( document. getElementById(" map"), { // google 地图 实例 化 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); // 经纬度 36 ginfo. innerHTML = "当前 位置（ 纬度：" + position. coords. latitude 37 + "， 经度：" + position. coords. longitude + "）"; // 显示 定位 结果 38 map. setCenter( pos); 39 map. setZoom( 14); 40 marker. setPosition( pos); // 更新 位置 标记 41 drawPath( position. coords); // 根据 当前 经纬度
经纬度 画线 42 }, 43 drawPath = function(){ // 画线 函数 44 var 45 coordinatesPathArray = [], // 所 监 听到 的 所有 经纬度 信息 46 lineOption = { // 画线 的 配置 选项 47 strokeColor: "#9290f8", // 线 的 颜色 48 strokeOpacity: 0. 5, // 线 的 透明度 49 strokeWeight: 5 // 线 的 精细 50 }, 51 coordsPath; // 保存 Polyline 的 变量 52 var draw = function( coords){ // 重 绘 函数 53 coordsPath. setMap( null); // 清除 原 有的 线 54 // 把 新的 位置 信息 加入 到 数组 中 55 coordinatesPathArray. push( new google. maps. LatLng( coords. latitude, coords. longitude)); 56 lineOption. path = coordinatesPathArray; // 线 的 path 配置 选项 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){ // 定位 出错 处理 函数 67 switch( error. code){ 68 case error. PERMISSION_ DENIED: // 定位 失败， 没有 权限 69 gmap. innerHTML = "定位 被 阻止， 请 检查 您的 授权 或者 网络 协议（" + error. message + ")"; 70 break; 71 case error. POSITION_ UNAVAILABLE: // 定位 失败， 不 可达 72 gmap. innerHTML = "定位 暂时 无法 使用， 请 检查 您的 网络(" + error. message + ")"; 73 break;
74 case error. TIMEOUT: // 定位 失败， 超时 75 gmap. innerHTML = "对不起， 定位 超时"; // 超时 了 76 break; 77 } 78 }, 79 getWatchPosition = function(){ // 定位 函数 80 var watchId = navigator. geolocation. watchPosition( watchMap, errorHandler, {timeout: 1000}); 81 }; 82 return getWatchPosition; // 返回 定位 函数 供 外部 调用 83 }(); 84 if (navigator. geolocation) { 85 gmap. innerHTML = "定位 中..."; 86 updatePosition(); // 定位 开始 87 } else { 88 gmap. innerHTML = '您的 浏览器 不支持 地理 位置'; // 定位 失败， 浏览器 不支持 89 } 90 }());
91 </ script> 92 </ html>
提示可以开车或者乘坐公交来移动当前位置，效果会更好。
.jpg)
