CH07 HTML5地理定位API项目.pptVIP

“ ” “ ” 第7章 HTML5地理定位API项目 目录 7.1 运动数据记录页面的设计与实现 7.2 运动轨迹绘制页面的设计与实现 7.1 运动数据记录页面的设计与实现 背景介绍：将HTML5地理定位API技术用于移动设备，实现简易运动距离记录功能。 7.1 运动数据记录页面的设计与实现 功能要求： 用户点击开始按钮开始记录，实时监控用户的地理位置，并计算运动的总距离。直到用户点击结束按钮停止监控。效果图如图所示。 7.1 运动数据记录页面的设计与实现 7.1.1 界面设计 【当前状态】和【详细信息】 h4生成标题 ul和li生成列表信息 7.1 运动数据记录页面的设计与实现 7.1.2 实时监控地理定位 1. 记录上一次以及当前获取的用户位置经纬度坐标 oldLong和oldLat currentLong和currentLat 2. 添加getLocation()方法用于实时获取定位信息。 var watchID = navigator.geolocation.watchPosition(showPosition, showError, options); 7.1 运动数据记录页面的设计与实现 7.1.3 开始/结束按钮切换 使用布尔值isRunning记录当前是否运动停止 自定义toggleBtn()切换按钮动作。 function toggleBtn() { var btn = document.getElementById(btn); if (!isRunning) { //开始运动 } else { //结束运动 } } 7.1 运动数据记录页面的设计与实现 7.1.4 计算与显示距离 半正矢公式（Haversine公式） 自定义函数toRadians(degree) 将角度转换为弧度 自定义函数getDistance(lat1, long1, lat2, long2) 使用半正矢公式求距离 7.1 运动数据记录页面的设计与实现 7.1.5 最终效果 7.2 运动轨迹绘制页面的设计与实现 背景介绍：随着人们对健康意识的提高，各类运动软件也逐渐流行。由于手机方便携带，又自带GPS自定功能，因此APP成为用户的首选，例如咕咚、益动等。这些软件都具有类似的一个功能模块，就是在电子地图上跟踪记录用户跑步或骑行的运动轨迹。 7.2 运动轨迹绘制页面的设计与实现 功能介绍：仿照运动APP的轨迹记录功能，将HTML5地理定位技术用于移动设备，实现地图显示与运动轨迹追踪绘制效果。用户运动前点击开始按钮进行记录，页面将实时监控用户的地理位置，并逐步绘制在地图画面上。用户完成运动时点击结束按钮停止绘制。 7.2 运动轨迹绘制页面的设计与实现 7.2.1 界面设计 地图区域： 用于显示电子地图和运动轨迹，是整个页面的总体部分； 控制区域： 用于显示“开始/结束”按钮和计时信息，内嵌于地图区域中。 7.2 运动轨迹绘制页面的设计与实现 7.2.2 开始/结束按钮切换 使用变量status记录当前运动状态 start：开始 stop：结束 button id=btn onclick=toggle() 开始跑步 /button 7.2 运动轨迹绘制页面的设计与实现 7.2.3 绘制地图与运动轨迹 1. 实时监控用户地理位置 //开始实时更新地理位置 function start() { //获取用户当前的定位信息 navigator.geolocation.getCurrentPosition(showPosition); ? //开始实时更新地理位置信息 watchID = navigator.geolocation.watchPosition(showPosition, showError, options); } 7.2 运动轨迹绘制页面的设计与实现 7.2.3 绘制地图与运动轨迹 2. 腾讯地图API的调用 head首尾标签中加入调用腾讯地图API的语句 腾讯地图中关于地图绘制的语法格式如下： 腾讯地图中关于折线绘制的语法格式如下： script charset=utf-8 src=/api/js?v=2.exp/script var map = new qq.maps.Map(mapContainer, options); var polygon = new qq.maps.Polyline(polylineOptions); 7.2 运动轨迹绘制页面的设计与实现 7.2.4 计时功能的实现 自定义函数startTime()用于每秒更新计时信息 修改stop(