实现咕咚地图路径颜色根据速度不同而颜色不同

原创 2016年05月31日 14:33:55


先上原图,如下:



上图是今天早上,本人六点起来跑步的路径示意图,特意下载咕咚,体验了一下这个跑步功能,重要的话说三遍,这不是广告,这不是广告,这不是广告。。。


废话不多说,通过这张图,我们可以分析一下大概如何实现:


我是用高德地图SDK 去实现的,看高德地图,看到有PolylineOptions这个方法,可以把轨迹点,放入到线里面。

1)PolylineOptions.add(LatLng point)添加点

2)PolylineOptions.useGradient(boolean useGradient) 设置是否使用渐变色

3)PolylineOptions.colorValues(java.util.List<java.lang.Integer> colors)设置分段颜色


我们可以通过每个点,设置一个相应速度的颜色值,通过设置渐变色为true,亮点之间,就会化出一条渐变色,通过所有点链接到一起,最终实现这个效果,

颜色渐变均匀,不会出现两个色块突然突变的过程。


添加色值代码:

PolylineOptions po = new PolylineOptions();
for (int i = 0; i < mListItem.size(); i++) {
LatLng point = new LatLng(mListItem.get(i).getLattitude(), mListItem.get(i).getLongitude());
po.add(point);
colorList.add(colorList.size(), agrSpeerColorHashMap.get(Integer.parseInt(mListItem.get(i).getSpeer())));
}

po.width(12);
po.useGradient(true);
po.colorValues(colorList);
po.zIndex(10);
mAMap.addPolyline(po);


半透明背景,是添加一个Marker,给这个Marker设置图片,设置Marker的宽高为2000公里,这样放大缩小,感觉不出来会被拖动


mAMap.addGroundOverlay(new GroundOverlayOptions()
.position(endPoint, 2*1000*1000, 2*1000*1000)
.image(BitmapDescriptorFactory.fromBitmap(BitmapFactory
.decodeResource(this.getResources(), icon))));


最后,点击遮挡地图,也是给上面这个半透明的Marker重新换张icon,来换切换,地图就被挡住了。


最后效果图,如下:





demo代码,在下面链接下载


http://download.csdn.net/detail/u010768699/9536736

版权声明:本文为博主原创文章,未经博主允许不得转载。

实现咕咚地图路径颜色根据速度不同而不同

  • 2016年05月31日 17:10
  • 9.44MB
  • 下载

高德地图做轨迹回放,能够控制动画的播放速度

下面展示的只是web页面: 效果图片: 1.html部分:                           张三                 定位                 轨迹...
  • u012767607
  • u012767607
  • 2017年03月27日 16:44
  • 4036

高德地图——标记

高德地图——标记
  • guchuanhang
  • guchuanhang
  • 2016年06月20日 19:25
  • 10953

Android 高德地图添加线段纹理

共享单车轨迹界面如:小黄车和摩拜单车界面布局采用的是高德地图,并且每个轨迹线段都是有对应的地图纹理 首先,我们在高德地图开发环境下进行地图线段纹理开发需要明确几个前提: 线段添加纹理根据官方文档是在...
  • qq_24536171
  • qq_24536171
  • 2017年04月14日 13:06
  • 1928

百度地图运行轨迹根据车速显示不同颜色线

最近有个需求是想根据车速划分不同的车速区间,并且在画运行轨迹的时候需要切换不同颜色的线。百度地图它有画运行轨迹的API,不过是根据一系列的经纬度来画一条线,但是只是展示一种颜色。网上百度了也没有发现有...
  • skywqnan
  • skywqnan
  • 2017年07月13日 17:25
  • 1283

MKMapView实时绘画渐变线条运动轨迹

首先你要看官方项目Breadcrumb,Breadcrumb项目中就是实时画运动轨迹的(项目中得到下一个点就移除覆盖物重新绘画所有的点连线); 下面讲下Core Graphics的基本使用 使用Cor...
  • qq348931837
  • qq348931837
  • 2016年01月21日 17:58
  • 1794

天地图专题四:在天地图上显示运行轨迹

我们就实现了在天地图上显示坐标轨迹。可以根据后台查询出来的数据在地图上显示轨迹。...
  • liusaint1992
  • liusaint1992
  • 2015年10月07日 16:08
  • 2063

百度地图添加纹理折线

如何将纹理折线添加到地图上百度地图开发过程中遇到了这样一坑,就是没有办法将自定义纹理折线的添加到地图上,一旦加上自定义纹理(textureIndexs)就会闪退,最可恨的是,百度官方给出的Dome 也...
  • github_14899071
  • github_14899071
  • 2015年11月25日 13:02
  • 2255

iOS 地图导航路线规划详解

虽然是转载的,还是说几句吧。网上百度地图导航路线规划倒是挺多的,苹果自带的高德导航确实挺少,研究了好久发现就这个讲的稍微全一点,把需要用到的类什么的都讲清楚了。不过高德有个方法可以跳转到它自己的地图上...
  • love_Coders
  • love_Coders
  • 2016年03月26日 11:20
  • 4177

基于高德SDK实现跑步时轨迹渐变功能

今天在无意间翻看半年多前做的项目的时候,除了对自己当时写的渣代码的无尽嫌弃,更多是感叹当时在遇到困难时的种种不易,印象比较深刻的是在做重邮约跑的时候视觉要求做一个跑步时轨迹动态渐变的功能,并且采用均匀...
  • xushuzhan
  • xushuzhan
  • 2017年12月04日 00:01
  • 615
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现咕咚地图路径颜色根据速度不同而颜色不同
举报原因:
原因补充:

(最多只允许输入30个字)