上圖是今天早上，本人六點起來跑步的路徑示意圖，特意下載咕咚，體驗了一下這個跑步功能，重要的話說三遍，這不是廣告，這不是廣告，這不是廣告。。。

廢話不多說，通過這張圖，我們可以分析一下大概如何實現：

我是用高德地圖SDK 去實現的，看高德地圖，看到有PolylineOptions這個方法，可以把軌跡點，放入到線裡面。

1）PolylineOptions.add(LatLng point)新增點

2）PolylineOptions.(boolean useGradient) 設定是否使用漸變色

3）PolylineOptions.(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程式碼，在下面連結下載