APP开发公司是怎样利用手机地理位置定位的？在一个以地点为核心的POI系统中，需要获取用户地理位置的坐标。深圳APP开发公司本例演示通过Wi-Fi获取当前地理位置的坐标。当用户打开浏览器时，页面上显示通过手机3G网络信号地理定位的当前坐标，同时用GoogleMaps显示标记当前的地理位置。在iPhone上使用Safari浏览器打开网页文件，运行效果如图4.6所示。
提示本例需要通过架设Web服务器来访问文件。点击“好”按钮，运行效果如图4.7所示。
提示：代码在iPhone的Safari浏览器下测试通过，建议使用Safari浏览器打开；确保手机关闭Wi-Fi；确保手机已通过手机信号连接上网络；出于隐私考虑，在第一次运行该页面时，会弹出提示是否授权使用您的地理位置信息，该程序需要授权才可正常使用定位功能。本例“4-1.手机地理定位.html”的关键函数via3G代码如下：
【代码4-1】
【代码4-1】
01 function via3G(){ 02 if (navigator. geolocation) { // 判断 浏览器 是否 支持 03 // 通过 HTML 5 getCurrnetPosition API 获取 定位 信息 04 navigator. geolocation. getCurrentPosition( function( position) { 05 var info = $("# info"), // 获取 地理 位置 信息 控 件 06 longlat_ html = // 拼接 HTML 07 '<h4> 手机 定位 </ h4>'+ 08 '<ul>'+ 09 '<li> 经度： ' + position. coords. longitude + '</li>'+ 10 '<li> 纬度： ' + position. coords. latitude + '</li>'+ 11 '</ul>';
12 info. html( longlat_ html); // 设置 显示 内容 结构 13 showMap( position. coords, document. getElementById(" map")); 14 }); 15 } else { 16 var _3g = $("# info"); // 获取 提示 元素 17 _3g. html(" 您的 浏览器 不支持 HTML 5 Geolocation API 定位 ").css(' color', '#F30'); 18 } 19 }
第04行，调用navigator.geolocation.getCurrentPosition方法通过手机信号获取定位信息。
APP开发怎样利用谷歌地图的使用
APP开发公司本文着重向各位介绍谷歌地图的使用方法，包括追踪用户的位置、查找路线和用户自定义的地理定位等功能。
1.追踪用户的位置
在地图上描绘出移动路径可以清楚地表示用户的移动轨迹。本例演示用Google地图追踪用户的地理位置，根据用户的移动轨迹在Google地图上画出移动路线图。在iPhone使用Safari浏览器打开“4-2.使用Google地图追踪用户的位置.html”网页文件，运行效果如图4.8所示。
APP开发怎样利用谷歌地图的使用
APP开发公司本文着重向各位介绍谷歌地图的使用方法，包括追踪用户的位置、查找路线和用户自定义的地理定位等功能。
1.追踪用户的位置
在地图上描绘出移动路径可以清楚地表示用户的移动轨迹。本例演示用Google地图追踪用户的地理位置，根据用户的移动轨迹在Google地图上画出移动路线图。在iPhone使用Safari浏览器打开“4-2.使用Google地图追踪用户的位置.html”网页文件，运行效果如图4.8所示。
提示：通过3G网络访问，需要通过Web服务器来访问网页文件。
移动当前位置，行走一段距离，在移动过程中，Google地图上会画出移动轨迹，如图4.9所示。
提示可以开车或者乘坐公交来移动当前位置，效果会更好。
提示可以开车或者乘坐公交来移动当前位置，效果会更好。利用编辑器打开“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>
代码第86行是本例的入口函数，该函数调用getWatchPosition方法，然后执行navigation.geolocation对象的watchPosition方法。
第80行调用HTML5GeolocationAPI的watchPosition函数，有3个参数，这3个参数和getCurrentPostion含义一样，区别在于watchPosition函数是一个监视器，监视用户的位置是否发生变化，如果发生变化，浏览器就会触发其回调函数，成功则回调函数watchMap，失败则回调函数errorHandler。
第40行的作用是在用户移动过程中重新标记用户的当前位置。
第41行调用画线程序。Google提供的画线APIPolyline会在2点间画出1条直线。根据用户频繁的位置移动形成多个点，连接每个点，形成一条直线。
第43～63行是画线函数。首先把画线的变量保存在闭包中，注意第61行代码，该函数会在页面载入时立即执行，并初始化coordinatesPathArray、lineOption、coordsPath这3个变量，
第62行返回draw函数。第52～59行定义真正的画线函数draw，第40行调用的drawPath函数实际上调用的是drawp函数。传递的参数为当前的坐标。draw函数的原理是先清除原先已经画的轨迹，再把当前的位置坐标加入到历史坐标数组coordinatesPathArray中，最后根据新的数组在GoogleMap上重新绘制一条轨迹。第53行清除当前地图上已经画好的路径轨迹。
第54行把当前位置坐标加入到coordinatesPathArray数组中。
第55～57行把当前新的位置坐标数组在GoogleMap上重新绘制出来。好了，APP开发公司本文关于“APP开发公司是怎样利用手机地理位置定位的？”知识就分享到这里，谢谢关注，博纳网络编辑整理。
第80行调用HTML5GeolocationAPI的watchPosition函数，有3个参数，这3个参数和getCurrentPostion含义一样，区别在于watchPosition函数是一个监视器，监视用户的位置是否发生变化，如果发生变化，浏览器就会触发其回调函数，成功则回调函数watchMap，失败则回调函数errorHandler。
第40行的作用是在用户移动过程中重新标记用户的当前位置。
第41行调用画线程序。Google提供的画线APIPolyline会在2点间画出1条直线。根据用户频繁的位置移动形成多个点，连接每个点，形成一条直线。
第43～63行是画线函数。首先把画线的变量保存在闭包中，注意第61行代码，该函数会在页面载入时立即执行，并初始化coordinatesPathArray、lineOption、coordsPath这3个变量，
第62行返回draw函数。第52～59行定义真正的画线函数draw，第40行调用的drawPath函数实际上调用的是drawp函数。传递的参数为当前的坐标。draw函数的原理是先清除原先已经画的轨迹，再把当前的位置坐标加入到历史坐标数组coordinatesPathArray中，最后根据新的数组在GoogleMap上重新绘制一条轨迹。第53行清除当前地图上已经画好的路径轨迹。
第54行把当前位置坐标加入到coordinatesPathArray数组中。
第55～57行把当前新的位置坐标数组在GoogleMap上重新绘制出来。好了，APP开发公司本文关于“APP开发公司是怎样利用手机地理位置定位的？”知识就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3113.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
