高德地图 API 显示跑步路线
模仿对象
此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制。目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画部分依然以此前 Nike+ 官网效果为准。
分析一下,想要仿制跑步路线图,其中有两个难点,第一个是画线动态效果,第二个是路线的渐变效果。画线动画是跑步过程的表现,渐变效果则是实时配速的表现。
光看都能感觉到渐变效果比较难,故这边就先不模仿它,搞定画线动画先。之前在 Nike+ 网页端,还在终点显示了跑步路程,画线动画进行的同时显示已跑的距离。
实现过程
网页端显示不比 App,尤其是还想嵌入在文章中的。一般是加载后,再给个点击事件激活动画效果。
添加折线
首先,把跑步折线显示出来,并显示起终点。在高德地图 API 文档中看到,可以使用 HTML 代码显示点标记的内容[1],这样一来,起终点以及距离都直接写 HTML,样式直接用 CSS 写就行。也方便后续画线动画时实时显示已跑的距离。
// 坐标集 var lineArr = [[116.81333,23.48132],[116.81333,23.48132],[116.81333,23.48132],[116.81352,23.48133],[116.81353,23.48124],... ];// 坐标总数,起终点坐标 var count = lineArr.length; var first = lineArr[0]; var last = lineArr[count - 1];// 构造地图对象 var map = new AMap.Map('map');// 跑步路线折线 var polyline = new AMap.Polyline({map: map,path: lineArr,lineJoin: 'round',strokeColor: "#52EE06",strokeOpacity: 1,strokeWeight: 3,strokeStyle: "solid" }); // 地图自适应 map.setFitView(); // 起点 new AMap.Marker({map: map,position: first,zIndex: 11,offset: new AMap.Pixel(-8, -8),content: '<div class="marker-circle green"></div>' });// 终点 new AMap.Marker({map: map,position: last,zIndex: 11,offset: new AMap.Pixel(-8, -8),content: '<div class="marker-circle red"></div>' });// 距离 var distance = new AMap.Marker({map: map,position: last,zIndex: 10,offset: new AMap.Pixel(-64, -12),// 采用 Polyline 类的 getLength() 方法直接获取折线长度content: '<div class="running-distance"><span class="running-number">' + (polyline.getLength()/1000).toFixed(1) + '</span>公里</div>' });
到这里,CSS 稍微修饰一翻,便可正常显示出跑步的路线、起终点坐标以及跑步距离。
添加动画
接下来是复杂一点的画线动画,先分析动画需要显示的:
- 画线效果为不断加长的折线
- 有个实时移动的点标记,刚开始是不显示的
- 画线同时,跑步路线底层为透明效果的黑色折线
- 画线同时,跑步距离文字随着动画效果而变化
其中:
- 折线可利用高德地图 API Polyline 类的
setPath()
方法来实现 - 点标记则是用
setPosition()
方法 - 底层的透明折线则可将上面显示的折线直接拿过来用,方法为
setOptions()
- 点标记的
setContent()
方法
于是将画线效果封装成函数,采用 setTimeout()
方法做延时,为了看到的是效果流畅,将 delay
设置为 40(即 40 毫秒,每秒 25 帧),自增变量并循环执行。
// 变化的折线 var runPolyline = new AMap.Polyline({map: map,lineJoin: 'round',strokeColor: "#52EE06",strokeOpacity: 1,strokeWeight: 3,strokeStyle: "solid", });// 移动的点标记 var current = new AMap.Marker({map: map,zIndex: 12,visible: false,offset: new AMap.Pixel(-8, -8),content: '<div class="marker-circle black"></div>' });// 点击地图事件 map.on('click', function() {// 将上面上面折线改为黑色透明作为底层 polyline.setOptions({strokeColor: '#000000',strokeOpacity: 0.2});// 显示画线点标记 current.show();i = 0;drawline(); });// 画线动画 function drawline() {if ( i < count ) {current.setPosition(lineArr[i]);runPolyline.setPath(lineArr.slice(0, i+1));distance.setContent('<div class="running-distance"><span class="running-number">' + (runPolyline.getLength()/1000).toFixed(1) + '</span>公里</div>');i++;} else {current.hide();return;}setTimeout(drawline, 40) }
完善动画
Nike+ 的坐标约为十米一记,一个半马两千个点,若一下子循环执行这么多次,一些浏览器可能性能不保,会影响到具体显示的效果。在这里需要做优化,将每次画线增加的距离改为可控。
// 画线动画 function drawline(step) {if (i < count / step) {var start = i * step;var end = (i + 1) * step >= count ? count - 1 : (i + 1) * step;current.setPosition(lineArr[end]);runPolyline.setPath(lineArr.slice(0, end+1));distance.setContent('<div class="running-distance"><span class="running-number">' + (runPolyline.getLength()/1000).toFixed(1) + '</span>公里</div>');i++;} else {current.hide();return;}setTimeout(function(){drawline(step);}, 40) }
这样一来,即 drawline(10)
则为一帧 100 米,一帧多少米也可根据点的数量指定,从而控制动画运行的总时间及保住某些浏览器。
最后给它一个 flag
,将画线动画改为可暂停。
var running = false; var i = 0; // 点击地图事件 map.on('click', function() {// 将上面上面折线改为黑色透明作为底层 polyline.setOptions({strokeColor: '#000000',strokeOpacity: 0.2});// 显示画线点标记 current.show();running = running == false ? true : false;// 动画运行总时间约五秒var step = parseInt(count/50);step = step == 0 ? 1 : step;drawline(step); });// 画线动画 function drawline(step) {if ( i < count / step ) {if( running == true ){var start = i * step;var end = (i + 1) * step >= count ? count - 1 : (i + 1) * step;current.setPosition(lineArr[end]);runPolyline.setPath(lineArr.slice(0, end+1));distance.setContent('<div class="running-distance"><span class="running-number">' + (runPolyline.getLength()/1000).toFixed(1) + '</span>公里</div>');i++;} else {return;}} else{current.hide();i = 0;running = false;return;}setTimeout(function(){drawline(step);}, 40) }
完整实例
加上 CSS,我将完整的实例扔在 GitHub[2],需要自取。
参考资料
- ^ Marker 类覆盖物
- ^ 高德地图 API 显示跑步路线
转载于:https://www.cnblogs.com/maplesog/p/8624495.html
高德地图 API 显示跑步路线相关推荐
- 基于高德地图SDK实现跑步路线踩点
前言 现在市面上有很多跑步的app,主要的功能大致是记录你的跑步路线以及你的跑步状况,速度距离等,大多是使用了高德地图,百度地图之类的SDK. 之前学校里有一款课外体育考勤的跑步APP,叫运动 ...
- 高德地图API显示行政区边界
基础骨架设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 高德地图API之步行路线
步行路线 引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com ...
- html5 计算步行数,高德地图API之步行路线
步行路线 引入插件 amap.walking map *{margin:0;padding:0;list-style: none;} #container {width:100%; height: 1 ...
- 高德地图API之驾车路线
驾车路线 引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com ...
- 高德地图小程序步行路线显示_微信小程序 高德地图路线规划实现过程详解
前言 最近项目中做到相关网约车小程序.需要使用到地图中的路线规划,对3种地图进行了分析.这里稍微做一下总结: 百度地图 百度坐标 (BD-09) 腾讯地图 火星坐标(GCJ-02) 高德地图 火星坐标 ...
- 高德地图API路线规划
高德地图API基础使用 高德地图API体验 申请Key 初体验 添加插件 点击事件返回地址值 两点之间获取驾车导航路线 高德地图API体验 申请Key 申请高德地图账号 登录后,应用管理下创建自己的应 ...
- 高德地图api如何不显示logo_Python爬取高德地图POI数据获取「洗浴推拿指南」
学习交流群 认识高德地图API 打开"高德开放平台",点击"开发文档",在"Web服务"下寻找并点击"搜索API". 我 ...
- python 根据经纬度 调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
最新文章
- 美国加州大学圣克鲁兹分校王鑫教授招收NLP/CV方向全奖博士生
- ITK:使用Deformation Field扭曲图像
- 将RHEL7/centos7系统网卡名称eno16777736改为eth0
- android 读取manifest的数据
- python【进阶】5.一等函数(注销)
- Flink java.lang.NoClassDefFoundError: org/apache/flink/api/common/functions/FlatMapFunction
- WampServer的配置
- 教你如何将二进制文件导入到数据库
- 转载--#define 用法
- IBM System 服务器做RAID步骤
- 京东app优惠券python抓取_备战双十一,scrapy框架爬取京东优惠券信息
- 谷歌浏览器启动后,图标变成空白解决办法
- 华为可信专业级认证是什么?
- 【opencvsharp】opencvsharp_samples.core示例代码笔记
- PCL——点云特征描述与提取
- uniApp实现热更新
- 大数据专业该学习什么?
- java获得日期去掉横杠,python怎么去掉日期中的横杠?
- java short float_java – 将float转换为short,具有最小的精度损失
- CAIE:第一部分:人工智能编程基础(四)