关闭

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

标签: 路径地图变色
3236人阅读 评论(1) 收藏 举报
分类:


先上原图,如下:



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


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


我是用高德地图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

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3732次
    • 积分:68
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论