上篇文章講述瞭如何在地圖顯示位置點，這篇文章主要講述如何在地圖上畫運動軌跡，以及地圖圖層點選事件的處理。

很多運動類的app都有畫出跑步者運動軌跡的需求，拿咕咚來說，我們看一下它的效果圖：

本篇將要實現的效果
1.跑步結束後，靜態的畫出整個運動軌跡
2.跑步過程中，時時動態的畫運動軌跡

如何實現：
1.將點與點連成線，在百度地圖MapView上畫出線條圖層；
2.獲取定位點List<LatLng>：通過百度定位sdk：LocationClient類獲取，戶外運動畫運動軌跡，要求位置點的精度高，所以我們必須使用gps定位型別的位置結果。

//允許使用gps定位
mOption.setOpenGps(true);

更多百度定位sdk引數詳解請閱讀篇頭百度地圖(一)文章

一 靜態畫整個運動軌跡

1.畫軌跡

//虛擬碼
public void onCreate(){
  // 地圖初始化
  MapView mMapView = (MapView) findViewById(R.id.bmapView);
  BaiduMap mBaiduMap = mMapView.getMap();
  // 開啟定點陣圖層
  mBaiduMap.setMyLocationEnabled(true);

  //獲取運動後的定位點
  coordinateConvert();

  //設定縮放中點LatLng target，和縮放比例          
 

  MapStatus.Builder builder = new MapStatus.Builder();
  builder.target(target).zoom(18f);

  //地圖設定縮放狀態
  mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));

  /**
  * 配置線段圖層引數類： PolylineOptions
  * ooPolyline.width(13)：線寬
  * ooPolyline.color(0xAAFF0000)：線條顏色紅色
  * ooPolyline.points(latLngs)：List<LatLng> latLngs位置點，將相鄰點與點連成線就成了軌跡了
  */
 

  OverlayOptions ooPolyline = new PolylineOptions().width(13).color(0xAAFF0000).points(latLngs);

  //在地圖上畫出線條圖層，mPolyline：線條圖層
  mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
  mPolyline.setZIndex(3);
}

/**
 * 我這裡是在google地圖取下來的wgs84座標集合Const.googleWGS84，模擬的運動後獲取的座標集合，
   所以需要轉化成百度座標；實際應該是將定位sdk返回的位置點加入到位置集合中，
   定位sdk需要設定返回座標為百度座標：mOption.setCoorType("bd09ll")，這樣就直接用，不用轉換了。
 */
private void  coordinateConvert(){
  //百度座標轉化工具類CoordinateConverter 
  CoordinateConverter converter  = new CoordinateConverter(); 

  /**
  * 設定需要轉化的座標型別
    CoordType.COMMON：google地圖、騰訊地圖、高德地圖所用座標
    CoordType.GPS：裝置採集的原始GPS座標
  */
  converter.from(CoordType.COMMON);

  double lanSum = 0;
  double lonSum = 0;
  for (int i = 0; i < Const.googleWGS84.length; i++) {
    //"39.881970,116.456218"
    String[] ll = Const.googleWGS84[i].split(",");
    LatLng sourceLatLng = new LatLng(Double.valueOf(ll[0]), Double.valueOf(ll[1]));
    converter.coord(sourceLatLng);  //需要轉化的座標點
    LatLng desLatLng = converter.convert();  //轉化成百度座標點
    latLngs.add(desLatLng);//加入定位點集合
    lanSum += desLatLng.latitude;
    lonSum += desLatLng.longitude;
  }

  //我這裡設定地圖的縮放中心點為所有點的幾何中心點
  target = new LatLng(lanSum/latLngs.size(), lonSum/latLngs.size());
}

運動軌跡效果

2.新增起始圖示圖層、點選圖層響應事件

//始點圖層圖示
BitmapDescriptor startBD= BitmapDescriptorFactory
            .fromResource(R.drawable.ic_me_history_startpoint);
//終點圖層圖示
BitmapDescriptor finishBD= BitmapDescriptorFactory
            .fromResource(R.drawable.ic_me_history_finishpoint);

//地圖中顯示資訊視窗
InfoWindow mInfoWindow;

MarkerOptions oStart = new MarkerOptions();//地圖示記型別的圖層引數配置類 
oStart.position(latLngs.get(0));//圖層位置點，第一個點為起點
oStart.icon(startBD);//設定圖層圖片
oStart.zIndex(1);//設定圖層Index
//新增起點圖層
Marker mMarkerA = (Marker) (mBaiduMap.addOverlay(oStart)); 

//新增終點圖層
MarkerOptions oFinish = new MarkerOptions().position(latLngs.get(latLngs.size()-1)).icon(finishBD).zIndex(2);
Marker mMarkerB = (Marker) (mBaiduMap.addOverlay(oFinish));

//設定圖層點選監聽回撥
mBaiduMap.setOnMarkerClickListener(new OnMarkerClickListener() {
  public boolean onMarkerClick(final Marker marker) {
    if (marker.getZIndex() == mMarkerA.getZIndex() ) {//如果是起始點圖層
      TextView textView = new TextView(getApplicationContext());
      textView.setText("起點");
      textView.setTextColor(Color.BLACK);
      textView.setGravity(Gravity.CENTER);
      textView.setBackgroundResource(R.drawable.popup);

      //設定資訊視窗點選回撥
      OnInfoWindowClickListener listener = new OnInfoWindowClickListener() {
        public void onInfoWindowClick() {
          //這裡是主線執行緒，可以實現自己的一些功能
          Toast.makeText(getApplicationContext(),"這裡是起點", Toast.LENGTH_SHORT).show();
          mBaiduMap.hideInfoWindow();//隱藏資訊視窗
        }
      };

      LatLng latLng = marker.getPosition();//資訊視窗顯示的位置點

      /**
      * 通過傳入的 bitmap descriptor 構造一個 InfoWindow
      * bd - 展示的bitmap
        position - InfoWindow顯示的位置點
        yOffset - 資訊視窗會與圖層圖示重疊，設定Y軸偏移量可以解決
        listener - 點選監聽者
      */
      mInfoWindow = new InfoWindow(BitmapDescriptorFactory.fromView(textView), latLng, -47, listener);
      mBaiduMap.showInfoWindow(mInfoWindow);//顯示資訊視窗
    } else if (marker.getZIndex() == mMarkerB.getZIndex()) {//如果是終點圖層
      Button button = new Button(getApplicationContext());
      button.setText("終點");
      button.setOnClickListener(new OnClickListener() {
        public void onClick(View v) {
          Toast.makeText(getApplicationContext(),"這裡是終點", Toast.LENGTH_SHORT).show();
          mBaiduMap.hideInfoWindow();
        }
      });

      LatLng latLng = marker.getPosition();
      /**
      * 通過傳入的 view 構造一個 InfoWindow, 此時只是利用該view生成一個Bitmap繪製在地圖中，監聽事件由自己實現。
        view - 展示的 view
        position - 顯示的地理位置
        yOffset - Y軸偏移量
      */
      mInfoWindow = new InfoWindow(button, latLng, -47);
      mBaiduMap.showInfoWindow(mInfoWindow);
    } 
    return true;
 }
});

//也可以給運動軌跡新增點選事件
mBaiduMap.setOnPolylineClickListener(new BaiduMap.OnPolylineClickListener() {
  @Override
  public boolean onPolylineClick(Polyline polyline) {
    if (polyline.getZIndex() == mPolyline.getZIndex()) {
      Toast.makeText(getApplicationContext(),"點數：" + polyline.getPoints().size() + ",width:" + polyline.getWidth(), Toast.LENGTH_SHORT).show();
    }
    return false;
  }
});

運動軌跡效果，點選圖示彈出資訊視窗

點選圖示彈出資訊視窗彈出Toast

到這裡，運動結束後畫出整個軌跡圖和圖層新增點選事件就介紹完了。

二 時時動態的畫運動軌跡

時時動態畫運動軌跡效果

關鍵在於取點：gps剛接收到訊號時返回的一些點精度不高，容易造成位置偏移，如何取點很重要。

//虛擬碼
public void onCreate() {
  mMapView = (MapView) findViewById(R.id.bmapView);
  mBaiduMap = mMapView.getMap();
  // 開啟定點陣圖層
  mBaiduMap.setMyLocationEnabled(true);

  /**新增地圖縮放狀態變化監聽，當手動放大或縮小地圖時，拿到縮放後的比例，然後獲取到下次定位，
  *  給地圖重新設定縮放比例，否則地圖會重新回到預設的mCurrentZoom縮放比例
  */
  mCurrentZoom = 18;
  mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() {
    @Override
    public void onMapStatusChangeStart(MapStatus arg0) {
    }

    @Override
    public void onMapStatusChangeFinish(MapStatus arg0) {
      mCurrentZoom = arg0.zoom;//獲取手指縮放地圖後的值
    }

    @Override
    public void onMapStatusChange(MapStatus arg0) {
    }
  });

  //設定定點陣圖標型別為跟隨模式
  mBaiduMap.setMyLocationConfiguration(new MyLocationConfiguration(
                com.baidu.mapapi.map.MyLocationConfiguration.LocationMode.FOLLOWING, true, null));

  // 定位初始化
  mLocClient = new LocationClient(this);
  mLocClient.registerLocationListener(myListener);
  LocationClientOption option = new LocationClientOption();
  option.setLocationMode(LocationMode.Device_Sensors);//只接受gps位置
  option.setOpenGps(true); // 允許gps定位
  option.setCoorType("bd09ll"); // 設定座標型別
  option.setScanSpan(1000);//一秒一個gps
  mLocClient.setLocOption(option);
}

//開始獲取位置點
public void onStart() {
  start.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        if (mLocClient != null && !mLocClient.isStarted()) {
            mLocClient.start();
        }
    }
  });
}

//位置回撥，取點很重要
public class MyLocationListenner implements BDLocationListener {

    @Override
    public void onReceiveLocation(final BDLocation location) {

        if (location == null || mMapView == null) {
            return;
        }

        if (location.getLocType() == BDLocation.TypeGpsLocation) {//只要gps點

            if (isFirstLoc) {//首次定位
                /**第一個點很重要，決定了軌跡的效果，gps剛接收到訊號時返回的一些點精度不高，
                * 儘量選一個精度相對較高的起始點，這個過程大概從gps剛接收到訊號後5-10秒就可以完成，不影響效果。
                * 注：gps接收衛星訊號少則十幾秒鐘，多則幾分鐘，
                * 如果長時間手機收不到gps，退出，重啟手機再試，這是硬體的原因
                */
                LatLng ll = null;

                //選一個精度相對較高的起始點
                ll = getMostAccuracyLocation(location);
                if(ll == null){
                    return;
                }
                isFirstLoc = false;
                points.add(ll);//加入集合
                last = ll;

                //顯示當前定位點，縮放地圖
                locateAndZoom(location, ll);

                //標記起點圖層位置
                MarkerOptions oStart = new MarkerOptions();// 地圖示記覆蓋物引數配置類
                oStart.position(points.get(0));// 覆蓋物位置點，第一個點為起點
                oStart.icon(startBD);// 設定覆蓋物圖片
                mBaiduMap.addOverlay(oStart); // 在地圖上新增此圖層
                return;//畫軌跡最少得2個點，首地定位到這裡就可以返回了
            }

            //從第二個點開始
            LatLng ll = new LatLng(location.getLatitude(), location.getLongitude());
            //sdk回撥gps位置的頻率是1秒1個，位置點太近動態畫在圖上不是很明顯，可以設定點之間距離大於為5米才新增到集合中
            if (DistanceUtil.getDistance(last, ll) < 5) {
                return;
            }

            points.add(ll);//如果要運動完成後畫整個軌跡，位置點都在這個集合中

            last = ll;

            //顯示當前定位點，縮放地圖
            locateAndZoom(location, ll);

            //清除上一次軌跡，避免重疊繪畫
            mMapView.getMap().clear();

            //起始點圖層也會被清除，重新繪畫
            MarkerOptions oStart = new MarkerOptions();
            oStart.position(points.get(0));
            oStart.icon(startBD);
            mBaiduMap.addOverlay(oStart);

            //將points集合中的點繪製軌跡線條圖層，顯示在地圖上
            OverlayOptions ooPolyline = new PolylineOptions().width(13).color(0xAAFF0000).points(points);
            mPolyline = (Polyline) mBaiduMap.addOverlay(ooPolyline);
        }
    }
}

//首次定位很重要，選一個精度相對較高的起始點
private LatLng getMostAccuracyLocation(final BDLocation location){

    if (location.getRadius()>25) {//gps位置精度大於25米的點直接棄用
        return null;
    }

    LatLng ll = new LatLng(location.getLatitude(), location.getLongitude());

    if (DistanceUtil.getDistance(last, ll ) > 5) {
        last = ll;
        points.clear();//有兩點位置大於5，重新來過
        return null;
    }
    points.add(ll);
    last = ll;
    //有5個連續的點之間的距離小於5，認為gps已穩定，以最新的點為起始點
    if(points.size() >= 5){
        points.clear();
        return ll;
    }
    return null;
}

//顯示當前定位點，縮放地圖
private void locateAndZoom(BDLocation location, LatLng ll) {
    /**
    * 記錄當前經緯度，當位置不變，手機轉動，取得方向感測器的方向，
      給地圖重新設定位置引數，在跟隨模式下可使地圖箭頭隨手機轉動而轉動
    */
    mCurrentLat = location.getLatitude();
    mCurrentLon = location.getLongitude();
    locData = new MyLocationData.Builder().accuracy(0)//去掉精度圈
            //此mCurrentDirection為自己獲取到的手機感測器方向資訊，順時針0-360
            .direction(mCurrentDirection).latitude(location.getLatitude())
            .longitude(location.getLongitude()).build();
    mBaiduMap.setMyLocationData(locData);//顯示當前定位位置點

    //給地圖設定縮放中心點，和縮放比例值
    builder = new MapStatus.Builder();
    builder.target(ll).zoom(mCurrentZoom);
    mBaiduMap.animateMapStatus(MapStatusUpdateFactory.newMapStatus(builder.build()));
}

//運動結束增加終點圖示
finish.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {

        if (mLocClient != null && mLocClient.isStarted()) {
            mLocClient.stop();//停止定位

            if(points.size() <= 0){
                return;
            }

            //運動結束記得標記終點圖示
            MarkerOptions oFinish = new MarkerOptions();
            oFinish.position(points.get(points.size() - 1));
            oFinish.icon(finishBD);
            mBaiduMap.addOverlay(oFinish); 
        }
    }
});

退出記得釋放資源

//虛擬碼
protected void onDestroy() {
  // 退出時銷燬定位
  mLocClient.unRegisterLocationListener(myListener);
  mLocClient.stop();
  // 關閉定點陣圖層
  mBaiduMap.setMyLocationEnabled(false);
  mMapView.getMap().clear();
  mMapView.onDestroy();
  mMapView = null;
  startBD.recycle();
  finishBD.recycle();
}

注：我們畫運動軌跡要求定位sdk返回的位置精度很高，軌跡的效果才會好，因而必須接受gps位置點。但是gps位置的在剛開始收到訊號時精度不高，會出現位置漂移的情況，所以要選取一個精度較好的點。在建築物、橋樑、大樹、隧道里面，gps訊號不好，精度不高，所以在開闊地帶，運動軌跡效果更好。