如何在地图上画曲线轨迹（贝塞尔曲线）


标签： Android高德地图曲线地图贝塞尔曲线地图路径渐变色
2015-11-12 11:04 1011人阅读 评论(1) 收藏 举报



 分类：

Android开发高德地图部分（1） 



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


做过地图开发的朋友都知道，对于高德或者百度地图来说，通过polylineOptions.add(point);aMap.addPolyline(polylineOptions);方法得到的地图路径是折线，而且颜色无法渐变，很难达到美观的项目需求。在我的上一个项目中，需求是行程结束后得到平滑的路径曲线，而且要有渐变色。本人开始从高德的API中找了很久也无法实现这样的需求，甚至想过自己写一个贝塞尔曲线的算法，但是水平有限只好放弃。最后采用的方法是在地图上面加一个画板，自定义一个View，通过path.quadTo(x1,
 y1, x2, y2)方法实现曲线需求，通过LinearGradient实现渐变色需求。以高德地图为例，详情如下：
1.在行程结束的时候记录下形成过程中所有的定位点的坐标值，保存在实体类的集合中。代码如下：
/**

 * 定位点的数据结构实体类

*/

public class FileRecordData {

    public double lat;

    public double lon;

}
在主Activity中，创建FileRecordData的List集合：
ArrayList<FileRecordData> fileDatas;

在每次定位重写的onLocationChanged方法里调用代码：
FileRecordData .lat = aLocation.getLatitude();

FileRecordData .lon = aLocation.getLongitude();

fileDatas.add(FileRecordData );

2.得到了所有的定位点，需要将所有的点都显示在可视化地图空间内：

Projection projection = aMap.getProjection();

public Point[] pointzu;

pointzu = new Point[fileDatas.size()];

if (fileDatas != null && 0 != fileDatas.size()) {
//获得起点和终点坐标
pointstart = new LatLng(fileDatas.get(0).lat, fileDatas.get(0).lon);
pointend = new LatLng(fileDatas.get(fileDatas.size() - 1).lat,
fileDatas.get(fileDatas.size() - 1).lon);
}
// 设置所有maker显示在View中
if (null != fileDatas && 0 != fileDatas.size()) {
LatLngBounds bounds;
double xMax = fileDatas.get(0).lat, xMin = fileDatas.get(0).lat, yMax = fileDatas
.get(0).lon, yMin = fileDatas.get(0).lon;
// 挑选出最大和最小的经纬度
for (int i = 0; i < fileDatas.size(); i++) {
if (fileDatas.get(i).lat >= xMax) {
xMax = fileDatas.get(i).lat;
}
if (fileDatas.get(i).lat <= xMin) {
xMin = fileDatas.get(i).lat;
}
if (fileDatas.get(i).lon >= yMax) {
yMax = fileDatas.get(i).lon;
}
if (fileDatas.get(i).lon <= yMin) {
yMin = fileDatas.get(i).lon;
}
}
//圈出一个能显示所有定位点的最左上、左下、右上、右下的区域的坐标
double xx = (xMax - xMin) / 5, yy = (yMax - yMin) / 5;
LatLng leftup = new LatLng(xMax + xx, yMin - yy);
LatLng leftdown = new LatLng(xMin - xx, yMin - yy);
LatLng rightup = new LatLng(xMax + xx, yMax + yy);
LatLng rightdown = new LatLng(xMin - xx, yMax + yy);
//将四个点放入可视化地图内
bounds = new LatLngBounds.Builder().include(pointstart)
.include(pointend).include(leftup).include(leftdown)
.include(rightdown).include(rightup).build();

aMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 20));
aMap.getUiSettings().setMyLocationButtonEnabled(false);
aMap.getUiSettings().setZoomControlsEnabled(false);


addOverlayToMap();
}

3.所有定位点的坐标已经有了，将定位坐标转化为屏幕坐标：
for (int i = 0; i < fileDatas.size(); i++) {
LatLng point = new LatLng(fileDatas.get(i).lat,
fileDatas.get(i).lon);
pointzu[i] = projection.toScreenLocation(point);

}
4.将pointzu传到自定义的View类中。重写onMeasure和onDraw方法。
public Point[] pointzu;

private Paint barPaint;

private float x0,y0,x1,y1;//起始点和终点坐标

/**
* 初始化画笔等
*/
private void init() {
barPaint = new Paint();
barPaint.setColor(Color.parseColor("#ed6731"));
barPaint.setColor(0xff15B503);
barPaint.setStrokeWidth(10);
barPaint.setAntiAlias(true);// 设置画笔为无锯齿
barPaint.setStyle(Style.STROKE);// 设置为空心
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

setMeasuredDimension(widthSize, heightSize);

}

@Override
protected void onDraw(Canvas canvas) {
Path pointPath = new Path();
if (pointzu != null) {
float firstX = (float) pointzu[0].x;
float firstY = (float) pointzu[0].y;
/**

  * 设置曲线渐变色

*/
LinearGradient lgGradient = new LinearGradient(x0, y0, x1, y1,
new int[] { 0xff00ff00, 0xffff0000, 0xff0000ff }, null,
TileMode.MIRROR);
barPaint.setShader(lgGradient);



/**

  * 设置贝塞尔曲线

*/
pointPath.reset();
pointPath.moveTo(firstX, firstY);
x0 = (float) pointzu[0].x;
y0 = (float) pointzu[0].y;
x1 = (float)pointzu[pointzu.length-1].x;
y1 = (float)pointzu[pointzu.length-1].y;

for (int n = 1; n < pointzu.length; n++) {
float x = (float) pointzu[n].x;
float y = (float) pointzu[n].y;
pointPath.quadTo(firstX, firstY, (firstX + x) / 2, (firstY + y) / 2);
firstX = x;
firstY = y;
}
pointPath.quadTo((firstX+(float)pointzu[pointzu.length-2].x)/2, (firstY+(float)pointzu[pointzu.length-2].y)/2, firstX, firstY);//三次贝塞尔曲线
canvas.drawPath(pointPath, barPaint);


/**

  * 给曲线添加起点和终点图片

*/
Bitmap bitmapStart = BitmapFactory.decodeResource(getResources(), R.drawable.riding_start_point);
Bitmap bitmapEnd = BitmapFactory.decodeResource(getResources(), R.drawable.riding_end_point);


/**

  * 因为图片的坐标不是图片中心作为参照点的，而是从左上角作为参照点，所有需要偏移量将参照点移到图片中心。

*/
canvas.drawBitmap(bitmapStart, x0-25, y0-34, barPaint);
canvas.drawBitmap(bitmapEnd, x1-25, y1-34, barPaint);

}else {
System.out.println("pointzu = null");
}
super.onDraw(canvas);
}

5.进行到上一步就可以看到地图上的平滑渐变曲线啦，不过这个例子是行程结束得到的曲线，并且地图是不能放大的，因为已经被画板盖住了；如果需求是在行驶过程中的路线变为曲线，那么需要每次定位后都将重新刷新一次自定义View，不过因为被画板盖住，所以地图依然无法放大，这一点目前还没有太好的解决办法，如果有大神知道，请留言指教，谢谢！
效果图如下：

 

上篇文章讲述了如何在地图显示位置点，这篇文章主要讲述如何在地图上画运动轨迹，以及地图图层点击事件的处理。

很多运动类的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

弹出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信号不好，精度不高，所以在开阔地带，运动轨迹效果更好。

    在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画

    在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程.  这个时候我们就需要在地图上使用轨迹动画了,根据不同的坐标点来设置人物或者车辆的行走轨迹.

    具体代码如下:

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px;margin-top:5px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data(){
    return {
      path : [{
        'lng': 121.814224,
        'lat': 31.156484
        }, {
          'lng': 121.808547,
          'lat': 31.165754
        }, {
          'lng': 121.796186,
          'lat': 31.184848
        }, {
          'lng': 121.788353,
          'lat': 31.192015
        }, {
          'lng': 121.771752,
          'lat': 31.194734
        },
        {
          'lng':  121.74969,
          'lat': 31.189791
        },
        {
          'lng': 121.754217,
          'lat': 31.179658
        }, {
          'lng': 121.757523,
          'lat': 31.167794
        }],
        maps:'',
        pls:''

    }
  },
  mounted(){
    this.pathStart()
   
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods:{
   
    // 创建地图实例,并给设置移动路径
      pathStart(){
          // GL版命名空间为BMapGL
      // 按住鼠标右键，修改倾斜角和角度
        var map = new BMapGL.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(121.814224,31.156484), 17);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  
          var point = [];
          for (var i = 0; i < this.path.length; i++) {
              point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));
          }
        var pl = new BMapGL.Polyline(point);
        
        this.maps = map
        this.pls = pl
        setTimeout(this.start, 3000);
   
         map.setHeading(64.5);
         map.setTilt(73);
      },
      // 创建个轨迹动画对象，并配置参数
      start (){
        var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
              overallView: true,
              tilt: 30,
              duration: 20000,
              delay: 300
          });
          trackAni.start();
      }
      
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>


     因为百度api中的方法是是不适用于vue项目的,所以我将其进行了改动, maps和pls是用来存储map对象和pl对象的,因为在我们的start中也是要用到的.  刚开始,我是使用了参数进行传值,就是setTimeout(this.start(map,pl), 3000);.可是如果这样写,start方法则会立刻执行,那我们设置的setTimeout也就无用了.所以换了现在的方法.path是一个个位置点

    这个就是地图中的 轨迹动画,欢迎指正, 希望对您有所帮助,欢迎探讨

    一直学习,一直踩坑中

folium简单应用
效果

# 导入库

import folium
import os,json
import numpy as np


## 读取json经纬度数据并画图，保存成html


with open('dataplt.json') as f:
    data = json.load(f)
    
'''创建Map对象'''
m = folium.Map(location=data[0],
              zoom_start=14)

'''查看m的类型'''
m.__class__

ls = folium.PolyLine(locations=[data],
                    color='blue')
ls.add_to(m)

'''为m添加标记部件'''
folium.Marker(
    location=data[-1],
    popup='End Point Location',
    icon=folium.Icon(color='red', icon='info-sign')
).add_to(m)

'''为m添加标记部件--圆圈'''
folium.Circle(
    radius=200,
    location=data[2],
    popup='The Waterfront',
    color='crimson',
    fill=False,
).add_to(m)

#print(data)
# 添加鼠标点击地图显示经纬度功能
m.add_child(folium.LatLngPopup())



m.save('folium_plot.html')

m.save(‘folium_plot.html’)
效果