温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序如何实现轨迹回放

发布时间:2021-02-03 13:24:44 阅读:805 作者:小新 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍微信小程序如何实现轨迹回放,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

微信小程序轨迹回放主要使用到polyline进行划线操作,以及使用marker去进行小车移动操作。效果图如下:

微信小程序如何实现轨迹回放

具体实现代码:

trackplay.wxml文件

<!--pages/tracker/tracker.wxml-->
<map id="mymap" longitude="{{mapCenter.longitude}}" latitude="{{mapCenter.latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polylineSettings}}" include-points="polygons" setting="{{mapSettings}}" bindregionchange="updatedMap" max-scale="16">
  <cover-view>{{showMessage}}</cover-view>
  <cover-view class="trackerImage" bindtap="trackerSetting">
    <cover-image class="lazy" data-src="{{imageSrc}}"></cover-image>
  </cover-view>
  <!--cover-view class="trackerQuick" bindtap="trackerQuickPlay">
    <cover-image  src="{{imageSpeedAdd}}"></cover-image>
  </cover-view>
  <cover-view class="trackerSlow" bindtap="trackerSlowPlay">
    <cover-image src="{{imageSpeedSlow}}"></cover-image>
  </cover-view-->
  <cover-view class="trackerPause" bindtap="trackerPause">
    <cover-image src="{{imagePause}}"></cover-image>
  </cover-view>
  <cover-view class="trackerPlay" bindtap="trackerPlay">
    <cover-image src="{{imagePlay}}"></cover-image>
  </cover-view>
</map>

trackplay.js文件

const app getApp();
Page({

 /**
  * 页面的初始数据
  */
 data: {
  mapCtxnull,
  scale14,
  imageSrc'/images/tracker/tracker-search.png',
  imageSpeedAdd'/images/tracker/speed-add.png',
  imageSpeedSlow'/images/tracker/speed-slow.png',
  imagePause'/images/tracker/pause.png',
  imagePlay'/images/tracker/play.png',
  mapCenter: {
   longitude113.324520,
   latitude23.099994
  },
  markers: [{ //标记点用于在地图上显示标记的位置
   iconPath"/images/tracker/car.png",
   id1,
   width25,
   height40,
   longitude113.324520,
   latitude23.099994,
   rotate0, //旋转角度 默认0
   anchor: {
    x.5,
    y.5
   }, //经纬度在标注图标的锚点,默认底边中点 {x.5, y1}
   callout: { //标记点上方的气泡窗口
    content'轨迹回放',
    color'#fff',
    fontSize16,
    borderRadius3,
    borderWidth1,
    borderColor'#07c160',
    bgColor'#fff',
    padding5,
    textAlign'center',
    display'BYCLICK'
   },
  }],
  polylineSettings: [{ //路线
   points: [{latitude22.596206, longitude113.87317, gpsBearing244},{latitude22.596216, longitude113.873192, gpsBearing244},{latitude22.596213, longitude113.873177, gpsBearing244},{latitude22.596212, longitude113.873205, gpsBearing244},{latitude22.596155, longitude113.873147, gpsBearing244},{latitude22.59614, longitude113.87315, gpsBearing244},{latitude22.596122, longitude113.873146, gpsBearing244},{latitude22.596098, longitude113.873101, gpsBearing244},{latitude22.596123, longitude113.873095, gpsBearing244},{latitude22.59613, longitude113.873047, gpsBearing244},{latitude22.596154, longitude113.873006, gpsBearing244},{latitude22.596142, longitude113.873006, gpsBearing244},{latitude22.596131, longitude113.873009, gpsBearing244},{latitude22.596117, longitude113.873011, gpsBearing244},{latitude22.596112, longitude113.873014, gpsBearing244},{latitude22.596114, longitude113.873021, gpsBearing244},{latitude22.596122, longitude113.873029, gpsBearing244},{latitude22.596131, longitude113.873039, gpsBearing244},{latitude22.596127, longitude113.873046, gpsBearing244},{latitude22.596116, longitude113.873053, gpsBearing244},{latitude22.596097, longitude113.873055, gpsBearing244},{latitude22.596084, longitude113.87306, gpsBearing244},{latitude22.596074, longitude113.873069, gpsBearing244},{latitude22.596062, longitude113.873076, gpsBearing244},{latitude22.596046, longitude113.873075, gpsBearing244},{latitude22.596028, longitude113.873072, gpsBearing244},{latitude22.595997, longitude113.873047, gpsBearing244},{latitude22.595982, longitude113.873054, gpsBearing244},{latitude22.595967, longitude113.873067, gpsBearing244},{latitude22.595971, longitude113.873058, gpsBearing244},{latitude22.595975, longitude113.873046, gpsBearing244},{latitude22.595984, longitude113.873035, gpsBearing244},{latitude22.595992, longitude113.87303, gpsBearing244},{latitude22.59602, longitude113.87305, gpsBearing244},{latitude22.596017, longitude113.873057, gpsBearing244},{latitude22.596017, longitude113.873056, gpsBearing244},{latitude22.596011, longitude113.87305, gpsBearing244},{latitude22.596008, longitude113.873049, gpsBearing244},{latitude22.596006, longitude113.87305, gpsBearing244},{latitude22.596004, longitude113.873053, gpsBearing244},{latitude22.596004, longitude113.873054, gpsBearing244},{latitude22.595989, longitude113.873044, gpsBearing244},{latitude22.595996, longitude113.873051, gpsBearing244},{latitude22.596023, longitude113.873084, gpsBearing244},{latitude22.596033, longitude113.873076, gpsBearing244},{latitude22.59604, longitude113.873076, gpsBearing244},{latitude22.596041, longitude113.873077, gpsBearing244},{latitude22.596035, longitude113.87308, gpsBearing244},{latitude22.596023, longitude113.873069, gpsBearing244},{latitude22.59602, longitude113.873076, gpsBearing244},{latitude22.596019, longitude113.873085, gpsBearing244},{latitude22.596027, longitude113.873101, gpsBearing244},{latitude22.596018, longitude113.873105, gpsBearing244},{latitude22.596012, longitude113.873108, gpsBearing244},{latitude22.596008, longitude113.873111, gpsBearing244},{latitude22.596009, longitude113.873119, gpsBearing244},{latitude22.59601, longitude113.873126, gpsBearing244},{latitude22.596015, longitude113.873135, gpsBearing244},{latitude22.596017, longitude113.873143, gpsBearing244},{latitude22.596017, longitude113.873152, gpsBearing244},{latitude22.595972, longitude113.873132, gpsBearing244},{latitude22.595979, longitude113.873145, gpsBearing244},{latitude22.595982, longitude113.873143, gpsBearing244},{latitude22.595988, longitude113.873132, gpsBearing244},{latitude22.595988, longitude113.873128, gpsBearing244},{latitude22.59599, longitude113.873135, gpsBearing244},{latitude22.595992, longitude113.87314, gpsBearing244},{latitude22.596003, longitude113.873144, gpsBearing244},{latitude22.596007, longitude113.873157, gpsBearing244},{latitude22.596009, longitude113.873165, gpsBearing244},{latitude22.59602, longitude113.873171, gpsBearing244},{latitude22.596035, longitude113.873175, gpsBearing244},{latitude22.596044, longitude113.873179, gpsBearing244},{latitude22.596049, longitude113.873176, gpsBearing244},{latitude22.59605, longitude113.873174, gpsBearing244},{latitude22.596049, longitude113.873177, gpsBearing244},{latitude22.596048, longitude113.87318, gpsBearing244},{latitude22.596049, longitude113.873186, gpsBearing244},{latitude22.596052, longitude113.873188, gpsBearing244},{latitude22.596053, longitude113.873192, gpsBearing244},{latitude22.596049, longitude113.873199, gpsBearing244},{latitude22.59605, longitude113.873199, gpsBearing244},{latitude22.596054, longitude113.873201, gpsBearing244},{latitude22.596061, longitude113.873211, gpsBearing244},{latitude22.596063, longitude113.873215, gpsBearing244},{latitude22.596064, longitude113.87322, gpsBearing244},{latitude22.59607, longitude113.873222, gpsBearing244},{latitude22.596067, longitude113.873219, gpsBearing244},{latitude22.596063, longitude113.873215, gpsBearing244},{latitude22.59606, longitude113.873219, gpsBearing244},{latitude22.596061, longitude113.873213, gpsBearing244},{latitude22.595382, longitude113.873102, gpsBearing0},{latitude22.595395, longitude113.873132, gpsBearing0},{latitude22.595371, longitude113.873124, gpsBearing0},{latitude22.595353, longitude113.873115, gpsBearing0},{latitude22.595278, longitude113.873133, gpsBearing0},{latitude22.595199, longitude113.873142, gpsBearing0},{latitude22.594997, longitude113.87324, gpsBearing91},{latitude22.595042, longitude113.873372, gpsBearing157},{latitude22.595165, longitude113.873482, gpsBearing14},{latitude22.595167, longitude113.873615, gpsBearing264},{latitude22.595127, longitude113.873673, gpsBearing229},{latitude22.595109, longitude113.873692, gpsBearing229},{latitude22.595107, longitude113.873709, gpsBearing229},{latitude22.595105, longitude113.873715, gpsBearing229},{latitude22.595092, longitude113.873767, gpsBearing229},{latitude22.595017, longitude113.873925, gpsBearing113},{latitude22.594878, longitude113.873748, gpsBearing242},{latitude22.594688, longitude113.873477, gpsBearing223},{latitude22.594547, longitude113.873267, gpsBearing243},{latitude22.594415, longitude113.873053, gpsBearing228},{latitude22.594323, longitude113.872878, gpsBearing239},{latitude22.594276, longitude113.872889, gpsBearing242},{latitude22.594277, longitude113.872878, gpsBearing242},{latitude22.594272, longitude113.872867, gpsBearing242},{latitude22.594252, longitude113.872834, gpsBearing242},{latitude22.594366, longitude113.872594, gpsBearing321},{latitude22.594751, longitude113.872271, gpsBearing330},{latitude22.595176, longitude113.871885, gpsBearing327},{latitude22.595756, longitude113.87141, gpsBearing326},{latitude22.59617, longitude113.870976, gpsBearing293},{latitude22.595982, longitude113.870511, gpsBearing228},{latitude22.595925, longitude113.870396, gpsBearing231},{latitude22.595922, longitude113.870391, gpsBearing231},{latitude22.595921, longitude113.870391, gpsBearing231},{latitude22.595879, longitude113.870283, gpsBearing251},{latitude22.59587, longitude113.870271, gpsBearing255},{latitude22.59585, longitude113.870248, gpsBearing255},{latitude22.595844, longitude113.870242, gpsBearing255},{latitude22.595838, longitude113.870234, gpsBearing255},{latitude22.595833, longitude113.870228, gpsBearing255},{latitude22.595801, longitude113.870155, gpsBearing255},{latitude22.595781, longitude113.870103, gpsBearing257},{latitude22.59577, longitude113.870088, gpsBearing257},{latitude22.595768, longitude113.870055, gpsBearing257},{latitude22.595792, longitude113.870001, gpsBearing257},{latitude22.595883, longitude113.869913, gpsBearing311},{latitude22.596241, longitude113.869685, gpsBearing340},{latitude22.597061, longitude113.86915, gpsBearing327},{latitude22.597764, longitude113.868657, gpsBearing327},{latitude22.598526, longitude113.868166, gpsBearing330},{latitude22.599516, longitude113.867496, gpsBearing326},{latitude22.600336, longitude113.866976, gpsBearing328},{latitude22.601014, longitude113.866459, gpsBearing325},{latitude22.601759, longitude113.865882, gpsBearing319},{latitude22.602108, longitude113.865617, gpsBearing327},{latitude22.602445, longitude113.865335, gpsBearing322},{latitude22.604112, longitude113.863745, gpsBearing318},{latitude22.60445, longitude113.863392, gpsBearing314},{latitude22.604655, longitude113.863191, gpsBearing317},{latitude22.604844, longitude113.862974, gpsBearing326},{latitude22.606299, longitude113.861679, gpsBearing322},{latitude22.60691, longitude113.861282, gpsBearing332},{latitude22.607577, longitude113.860947, gpsBearing336},{latitude22.608198, longitude113.860659, gpsBearing338},{latitude22.608535, longitude113.860509, gpsBearing344},{latitude22.608922, longitude113.860322, gpsBearing332},{latitude22.609435, longitude113.860072, gpsBearing338},{latitude22.61004, longitude113.859761, gpsBearing334},{latitude22.610392, longitude113.859548, gpsBearing335},{latitude22.61047, longitude113.859458, gpsBearing338},{latitude22.610558, longitude113.859366, gpsBearing338},{latitude22.610873, longitude113.85919, gpsBearing333},{latitude22.611081, longitude113.859092, gpsBearing331},{latitude22.611356, longitude113.858966, gpsBearing340},{latitude22.611655, longitude113.858828, gpsBearing333},{latitude22.612054, longitude113.858623, gpsBearing334},{latitude22.612305, longitude113.858503, gpsBearing335},{latitude22.612555, longitude113.858369, gpsBearing335},{latitude22.612731, longitude113.858277, gpsBearing334},{latitude22.613101, longitude113.858116, gpsBearing343},{latitude22.613474, longitude113.85796, gpsBearing341},{latitude22.614135, longitude113.857541, gpsBearing328},{latitude22.615013, longitude113.856929, gpsBearing326},{latitude22.616048, longitude113.85613, gpsBearing322},{latitude22.617079, longitude113.855296, gpsBearing319},{latitude22.61802, longitude113.854498, gpsBearing321},{latitude22.618689, longitude113.853904, gpsBearing321},{latitude22.619046, longitude113.85358, gpsBearing318},{latitude22.619278, longitude113.853376, gpsBearing316},{latitude22.619668, longitude113.853046, gpsBearing329},{latitude22.620248, longitude113.852555, gpsBearing320},{latitude22.62042, longitude113.85239, gpsBearing321},{latitude22.62085, longitude113.852022, gpsBearing321},{latitude22.621188, longitude113.851787, gpsBearing337},{latitude22.62167, longitude113.851444, gpsBearing326},{latitude22.622059, longitude113.851191, gpsBearing331},{latitude22.622527, longitude113.850892, gpsBearing330},{latitude22.622824, longitude113.850735, gpsBearing340},{latitude22.623182, longitude113.850531, gpsBearing332},{latitude22.623666, longitude113.850243, gpsBearing333},{latitude22.624357, longitude113.84992, gpsBearing337},{latitude22.624972, longitude113.849677, gpsBearing342},{latitude22.625648, longitude113.849314, gpsBearing327},{latitude22.626399, longitude113.848871, gpsBearing332},{latitude22.626952, longitude113.848533, gpsBearing328},{latitude22.627567, longitude113.848077, gpsBearing324},{latitude22.628267, longitude113.847538, gpsBearing325},{latitude22.62907, longitude113.846803, gpsBearing320},{latitude22.629844, longitude113.846088, gpsBearing319},{latitude22.630508, longitude113.845474, gpsBearing320},{latitude22.631219, longitude113.844839, gpsBearing320},{latitude22.631904, longitude113.844202, gpsBearing317},{latitude22.6326, longitude113.843615, gpsBearing323},{latitude22.63327, longitude113.84305, gpsBearing319},{latitude22.63395, longitude113.84246, gpsBearing321},{latitude22.634749, longitude113.841687, gpsBearing314},{latitude22.635693, longitude113.840785, gpsBearing318},{latitude22.636531, longitude113.839701, gpsBearing302},{latitude22.637421, longitude113.838755, gpsBearing320},{latitude22.638429, longitude113.837917, gpsBearing318},{latitude22.639228, longitude113.837153, gpsBearing318},{latitude22.639727, longitude113.836756, gpsBearing325},{latitude22.640429, longitude113.836294, gpsBearing330},{latitude22.640876, longitude113.836018, gpsBearing332},{latitude22.641161, longitude113.835815, gpsBearing324},{latitude22.641617, longitude113.835526, gpsBearing334},{latitude22.642177, longitude113.835227, gpsBearing331},{latitude22.642515, longitude113.834992, gpsBearing320},{latitude22.643021, longitude113.834658, gpsBearing329},{latitude22.643557, longitude113.834292, gpsBearing328},{latitude22.644073, longitude113.833943, gpsBearing327},{latitude22.644542, longitude113.833564, gpsBearing319},{latitude22.645273, longitude113.832871, gpsBearing319},{latitude22.64629, longitude113.832075, gpsBearing321},{latitude22.647176, longitude113.831203, gpsBearing315},{latitude22.648153, longitude113.830214, gpsBearing316},{latitude22.64912, longitude113.829231, gpsBearing316},{latitude22.649892, longitude113.828469, gpsBearing319},{latitude22.650929, longitude113.827758, gpsBearing334},{latitude22.652273, longitude113.82722, gpsBearing346},{latitude22.653721, longitude113.827043, gpsBearing0},{latitude22.65517, longitude113.827253, gpsBearing14},{latitude22.656599, longitude113.827553, gpsBearing11},{latitude22.658001, longitude113.827843, gpsBearing10},{latitude22.659265, longitude113.828104, gpsBearing10},{latitude22.660267, longitude113.828311, gpsBearing11},{latitude22.661353, longitude113.828523, gpsBearing10},{latitude22.662587, longitude113.828707, gpsBearing5},{latitude22.663792, longitude113.828852, gpsBearing9},{latitude22.664849, longitude113.828935, gpsBearing358},{latitude22.666112, longitude113.828927, gpsBearing0},{latitude22.66696, longitude113.828904, gpsBearing0},{latitude22.6682, longitude113.828904, gpsBearing1},{latitude22.669147, longitude113.828892, gpsBearing357},{latitude22.670029, longitude113.82891, gpsBearing1},{latitude22.670366, longitude113.829053, gpsBearing74},{latitude22.670421, longitude113.829364, gpsBearing90},{latitude22.670444, longitude113.829855, gpsBearing93},{latitude22.670461, longitude113.830243, gpsBearing77},{latitude22.670541, longitude113.830399, gpsBearing21},{latitude22.670909, longitude113.83034, gpsBearing349},{latitude22.671146, longitude113.830415, gpsBearing38},{latitude22.671149, longitude113.830554, gpsBearing143},{latitude22.671147, longitude113.830591, gpsBearing103},{latitude22.671211, longitude113.830701, gpsBearing59},{latitude22.671229, longitude113.830758, gpsBearing54},{latitude22.671152, longitude113.830826, gpsBearing141},{latitude22.671181, longitude113.830789, gpsBearing148},{latitude22.671081, longitude113.830807, gpsBearing173},{latitude22.671056, longitude113.830823, gpsBearing176},{latitude22.671067, longitude113.830761, gpsBearing197},{latitude22.671138, longitude113.830843, gpsBearing199},{latitude22.67108, longitude113.830825, gpsBearing204},{latitude22.671102, longitude113.830873, gpsBearing210},{latitude22.671024, longitude113.830966, gpsBearing200},{latitude22.670681, longitude113.830952, gpsBearing146},{latitude22.670178, longitude113.830837, gpsBearing182},{latitude22.671683, longitude113.830848, gpsBearing63},{latitude22.671662, longitude113.830848, gpsBearing63},{latitude22.671662, longitude113.830841, gpsBearing55},{latitude22.671555, longitude113.83088, gpsBearing20},{latitude22.671481, longitude113.830897, gpsBearing11},{latitude22.671486, longitude113.830877, gpsBearing11},{latitude22.671422, longitude113.830844, gpsBearing11},{latitude22.6714, longitude113.830852, gpsBearing11},{latitude22.671388, longitude113.830872, gpsBearing11},{latitude22.671458, longitude113.830874, gpsBearing11},{latitude22.671463, longitude113.830894, gpsBearing11},{latitude22.671475, longitude113.830892, gpsBearing11},{latitude22.671493, longitude113.830812, gpsBearing11},{latitude22.67146, longitude113.830784, gpsBearing11},{latitude22.671443, longitude113.830807, gpsBearing11},{latitude22.671389, longitude113.830789, gpsBearing11},{latitude22.671289, longitude113.830735, gpsBearing11},{latitude22.671227, longitude113.830663, gpsBearing11},{latitude22.671224, longitude113.830673, gpsBearing11},{latitude22.671251, longitude113.830766, gpsBearing11},{latitude22.671234, longitude113.830775, gpsBearing11},{latitude22.67121, longitude113.830679, gpsBearing11},{latitude22.67117, longitude113.83051, gpsBearing11},{latitude22.671142, longitude113.830573, gpsBearing11},{latitude22.670879, longitude113.830429, gpsBearing348},{latitude22.670907, longitude113.830445, gpsBearing260},{latitude22.670978, longitude113.830479, gpsBearing224},{latitude22.671004, longitude113.830568, gpsBearing224},{latitude22.670994, longitude113.830727, gpsBearing153},{latitude22.670997, longitude113.830757, gpsBearing161},{latitude22.671047, longitude113.830795, gpsBearing166},{latitude22.671073, longitude113.830817, gpsBearing169},{latitude22.671085, longitude113.830824, gpsBearing169},{latitude22.671058, longitude113.830814, gpsBearing169},{latitude22.671086, longitude113.830899, gpsBearing169},{latitude22.671089, longitude113.830965, gpsBearing169},{latitude22.671117, longitude113.830947, gpsBearing169},{latitude22.671631, longitude113.831154, gpsBearing158},{latitude22.6716, longitude113.831148, gpsBearing145},{latitude22.67152, longitude113.831287, gpsBearing145},{latitude22.671486, longitude113.831509, gpsBearing77},{latitude22.67135, longitude113.831558, gpsBearing96},{latitude22.671349, longitude113.831529, gpsBearing102},{latitude22.671346, longitude113.831489, gpsBearing95},{latitude22.671388, longitude113.831372, gpsBearing95},{latitude22.671386, longitude113.831333, gpsBearing95},{latitude22.671407, longitude113.831286, gpsBearing95},{latitude22.671292, longitude113.831228, gpsBearing95},{latitude22.671025, longitude113.831196, gpsBearing149},{latitude22.671026, longitude113.831183, gpsBearing180},{latitude22.671076, longitude113.83113, gpsBearing180},{latitude22.671119, longitude113.831024, gpsBearing180},{latitude22.67117, longitude113.830974, gpsBearing180},{latitude22.67112, longitude113.830935, gpsBearing180},{latitude22.671233, longitude113.830912, gpsBearing180},{latitude22.671269, longitude113.830879, gpsBearing180},{latitude22.671215, longitude113.830906, gpsBearing180},{latitude22.6712, longitude113.830907, gpsBearing180},{latitude22.671278, longitude113.830979, gpsBearing180},{latitude22.671498, longitude113.831101, gpsBearing180},{latitude22.671705, longitude113.831304, gpsBearing43},{latitude22.671713, longitude113.831276, gpsBearing297},{latitude22.67165, longitude113.831221, gpsBearing298},{latitude22.671617, longitude113.83117, gpsBearing312},{latitude22.671463, longitude113.831156, gpsBearing326},{latitude22.671413, longitude113.831106, gpsBearing339},{latitude22.671225, longitude113.831049, gpsBearing353},{latitude22.670929, longitude113.830936, gpsBearing99},{latitude22.670841, longitude113.83088, gpsBearing225},{latitude22.671066, longitude113.830904, gpsBearing231},{latitude22.671164, longitude113.830972, gpsBearing20},{latitude22.671189, longitude113.83107, gpsBearing22},{latitude22.671145, longitude113.831111, gpsBearing29},{latitude22.671133, longitude113.830951, gpsBearing34},{latitude22.671185, longitude113.830818, gpsBearing29},{latitude22.671209, longitude113.830802, gpsBearing348},{latitude22.671145, longitude113.830834, gpsBearing348},{latitude22.67109, longitude113.830825, gpsBearing348},{latitude22.671034, longitude113.830765, gpsBearing348},{latitude22.671065, longitude113.830838, gpsBearing348},{latitude22.671175, longitude113.830935, gpsBearing348},{latitude22.671178, longitude113.830935, gpsBearing348},{latitude22.671248, longitude113.830893, gpsBearing348},{latitude22.671134, longitude113.83089, gpsBearing348},{latitude22.671147, longitude113.830964, gpsBearing348},{latitude22.671283, longitude113.831064, gpsBearing348},{latitude22.671341, longitude113.831058, gpsBearing348}],
   color"#7b7af8",
   width5,
   //borderWidth2,
   borderColor'#7b7af8',
   level'abovebuildings',   //压盖关系
   arrowLinetrue        //带箭头的线
  }],
  polygons: [],
  mapSettings: {        //统一设置地图配置
   skew0,         //倾斜角度
   rotate0,        //旋转角度
   showScalefalse,     //显示比例尺,工具暂不支持
   subKey'',        //个性化地图使用的key
   layerStyle1,      //个性化地图配置的 style
   enableZoomtrue,     //缩放
   enableScrolltrue,    //拖动
   enableRotatefalse,   //旋转
   showCompassfalse,     //指南针
   enable3Dfalse,      //展示3D楼块(工具暂不支持)
   enableOverlookingfalse,  //俯视
   enableSatellitefalse,   //卫星图
   enableTrafficfalse,    //实时路况
  },
  playIndex0,
  showMessage"",
  step1,
  duration100,
  maxDuration2000,
  minDuration500,
  isPausefalse
 },
 trackPlay: function () { //轨迹接口
  const that = this;
  const points = this.data.polylineSettings[0].points;
  that.setData({
   'markers[0].latitude': points[0].latitude,
   'markers[0].longitude': points[0].longitude,
   mapCenter: points[0],
  }, function () {
   that.mapCtx.translateMarker({
    markerId1,
    autoRotatetrue,
    moveWithRotatetrue,
    duration1000,
    destination: points[0]
   })
   that.beginTrack() //轨迹回放
  })
 },
 beginTrack: function () { //轨迹回放
  const that = this;
  let index = that.data.playIndex === 0 ? 0 : that.data.playIndex;
  let points = this.data.polylineSettings[0].points;
  let duration = that.data.duration;

  //this.play();
  that.data.trackTimer = setInterval(function () {
   const point = points[index];
   that.data.lastPoint = point;
   //console.log("最后点:",that.data.lastPoint);
   // console.log(point,that.getCurrentTime());
   that.mapCtx.translateMarker({
    markerId1,
    autoRotatefalse,
    moveWithRotatetrue,
    duration: duration,
    destination: point,
    rotate: point.gpsBearing,
    fail: function (res) {
     console.log(res);
    },
    success: function () {
     that.setData({
      playIndex: index,
      showMessage: point.latitude + "," + point.longitude + "," + point.gpsBearing + "," + points.length + "," + index
     })
     that.mapCtx.getRegion({
      success: function (e) {
       if (that.checkOutRegion(point, e.southwest, e.northeast)) {
        that.setData({
         mapCenter: point,
        })
       }
      }
     });
     if (index + 1 >= points.length) {
      that.stopTrack()
     }
     index++;
    }
   })

  }, duration);
 },
 stopTrack: function () { //结束回放
  const that = this;
  let points = this.data.polylineSettings[0].points;
  that.setData({
   playIndex0,
   'markers[0].latitude': points[0].latitude,
   'markers[0].longitude': points[0].longitude,
  });
  clearInterval(that.data.trackTimer);
 },
 checkOutRegion: function (point, southwest, northeast) {
  // console.log(point,southwest,northeast);
  if (point.longitude < southwest.longitude || point.latitude < southwest.latitude) {
   return true;
  }
  if (point.longitude > northeast.longitude || point.latitude > northeast.latitude) {
   return true;
  }
  return false;
 },
 trackerPause: function () {
  if (!this.data.isPause) {
   clearInterval(this.data.trackTimer);
   this.setData({
    isPausetrue
   });
  }

 },
 trackerPlay: function () {
  if (this.data.isPause) {
   this.beginTrack();
   this.setData({
    isPausefalse
   });
  }

 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.mapCtx = wx.createMapContext('mymap');
  this.trackPlay();
 },
})

这里如果每次移动一个点,就切换一下地图中心点,去跟随车辆位置的话,地图会有抖动的感觉。所以我们做了一个可视化区域的判断,当车出了可视化区域的时候再进行地图中心点的切换。

这里还使用了translateMarker的函数来进行小车偏向角的切换,让小车可以平滑切换。要注意小车图片默认的朝上是向上,相当于正北方向。

目前是实现了轨迹回放功能的,后续我们将继续添加快进和快退的功能。

实现过程中遇到几个小程序bug,暂时无法解决,先记录下来,等微信更新:

1.画轨迹线中borderWidth设置,导致轨迹真机无法显示。

2.地图层级切换导致的轨迹不可见。具体可以参照:https://developers.weixin.qq.com/community/develop/doc/000e8eed2fc20884237a791105b800

以上是“微信小程序如何实现轨迹回放”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×