高德地图 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],需要自取。

参考资料

  1. ^ Marker 类覆盖物
  2. ^ 高德地图 API 显示跑步路线

原文地址:https://www.cnblogs.com/maplesog/p/8624495.html

时间: 2024-10-05 09:07:36

高德地图 API 显示跑步路线的相关文章

高德地图API之货车路线

货车路线: 引入 AMap.TruckDriving 注意:和驾车路线.步行路线不同的是,必须指定cidy和size,并且坐标传入为json格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript"

高德地图API之公交路线

引入插件 AMap.Transfer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&ke

【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

百度地图API和高德地图API资料集锦

[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 [高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 [高德地图API]从零开始学高德JS API(二)地图控件与插件--测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 [高德地图API]从零开始学高德JS API

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使

【高德地图API】从零开始学高德JS API(四)搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

【高德地图API】从零开始学高德JS API(一)地图展现

摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何定位图片的位置吧.以前那么复杂的一系列操作,居然让云图的可视化操作一下子解决了.现在只要点一点鼠标,麻点图就自动生成了.真是广大LBS开发者的福音. 以前写过从零开始学百度地图AP

【高德地图API】一句话搞定webmap(一)——轻地图组件

摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而如今,要制作一张地图真是越来越容易了!竟然只需要一句话,就可以打点,导航,定位,显示交通流量等. 让我们一起来轻松一下吧~ ------------------------------------华丽分割线----------------------------------------- 一.标注 一句话代码: http://mo.amap.com/navi?des