微信小程序轨迹回放实现及遇到的坑

微信小程序轨迹回放功能实现

原创

已于 2022-09-17 22:30:29 修改 · 4.7k 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #小程序 #开发语言

于 2020-12-29 20:23:46 首次发布

本文介绍微信小程序轨迹回放的实现，主要用polyline划线、marker实现小车移动。为避免地图抖动，做了可视化区域判断。还使用translateMarker函数实现小车偏向角平滑切换。已实现轨迹回放，后续将添加快进快退功能，同时记录了两个暂未解决的小程序bug。

微信小程序轨迹回放实现

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

watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlZW53,size_16,color_FFFFFF,t_70

具体实现代码：

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 src="{
  
  {imageSrc}}"></cover-image>
	</cover-view>
	<!--cover-view class="trackerQuick" bindtap="trackerQuickPlay">
		<cover-image style="line-height:1;" 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: {
    mapCtx: null,
    scale: 14,
    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: {
      longitude: 113.324520,
      latitude: 23.099994
    },
    markers: [{ //标记点用于在地图上显示标记的位置
      iconPath: "/images/tracker/car.png",
      id: 1,
      width: 25,
      height: 40,
      longitude: 113.324520,
      latitude: 23.099994,
      rotate: 0, //旋转角度 默认0
      anchor: {
        x: .5,
        y: .5
      }, //经纬度在标注图标的锚点，默认底边中点 {x: .5, y: 1}
      callout: { //标记点上方的气泡窗口
        content: '轨迹回放',
        color: '#fff',
        fontSize: 16,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#07c160',
        bgColor: '#fff',
        padding: 5,
        textAlign: 'center',
        display: 'BYCLICK'
      },
    }],
    polylineSettings: [{ //路线
      points: [{latitude: 22.596206, longitude: 113.87317, gpsBearing: 244},{latitude: 22.596216, longitude: 113.873192, gpsBearing: 244},{latitude: 22.596213, longitude: 113.873177, gpsBearing: 244},{latitude: 22.596212, longitude: 113.873205, gpsBearing: 244},{latitude: 22.596155, longitude: 113.873147, gpsBearing: 244},{latitude: 22.59614, longitude: 113.87315, gpsBearing: 244},{latitude: 22.596122, longitude: 113.873146, gpsBearing: 244},{latitude: 22.596098, longitude: 113.873101, gpsBearing: 244},{latitude: 22.596123, longitude: 113.873095, gpsBearing: 244},{latitude: 22.59613, longitude: 113.873047, gpsBearing: 244},{latitude: 22.596154, longitude: 113.873006, gpsBearing: 244},{latitude: 22.596142, longitude: 113.873006, gpsBearing: 244},{latitude: 22.596131, longitude: 113.873009, gpsBearing: 244},{latitude: 22.596117, longitude: 113.873011, gpsBearing: 244},{latitude: 22.596112, longitude: 113.873014, gpsBearing: 244},{latitude: 22.596114, longitude: 113.873021, gpsBearing: 244},{latitude: 22.596122, longitude: 113.873029, gpsBearing: 244},{latitude: 22.596131, longitude: 113.873039, gpsBearing: 244},{latitude: 22.596127, longitude: 113.873046, gpsBearing: 244},{latitude: 22.596116, longitude: 113.873053, gpsBearing: 244},{latitude: 22.596097, longitude: 113.873055, gpsBearing: 244},{latitude: 22.596084, longitude: 113.87306, gpsBearing: 244},{latitude: 22.596074, longitude: 113.873069, gpsBearing: 244},{latitude: 22.596062, longitude: 113.873076, gpsBearing: 244},{latitude: 22.596046, longitude: 113.873075, gpsBearing: 244},{latitude: 22.596028, longitude: 113.873072, gpsBearing: 244},{latitude: 22.595997, longitude: 113.873047, gpsBearing: 244},{latitude: 22.595982, longitude: 113.873054, gpsBearing: 244},{latitude: 22.595967, longitude: 113.873067, gpsBearing: 244},{latitude: 22.595971, longitude: 113.873058, gpsBearing: 244},{latitude: 22.595975, longitude: 113.873046, gpsBearing: 244},{latitude: 22.595984, longitude: 113.873035, gpsBearing: 244},{latitude: 22.595992, longitude: 113.87303, gpsBearing: 244},{latitude: 22.59602, longitude: 113.87305, gpsBearing: 244},{latitude: 22.596017, longitude: 113.873057, gpsBearing: 244},{latitude: 22.596017, longitude: 113.873056, gpsBearing: 244},{latitude: 22.596011, longitude: 113.87305, gpsBearing: 244},{latitude: 22.596008, longitude: 113.873049, gpsBearing: 244},{latitude: 22.596006, longitude: 113.87305, gpsBearing: 244},{latitude: 22.596004, longitude: 113.873053, gpsBearing: 244},{latitude: 22.596004, longitude: 113.873054, gpsBearing: 244},{latitude: 22.595989, longitude: 113.873044, gpsBearing: 244},{latitude: 22.595996, longitude: 113.873051, gpsBearing: 244},{latitude: 22.596023, longitude: 113.873084, gpsBearing: 244},{latitude: 22.596033, longitude: 113.873076, gpsBearing: 244},{latitude: 22.59604, longitude: 113.873076, gpsBearing: 244},{latitude: 22.596041, longitude: 113.873077, gpsBearing: 244},{latitude: 22.596035, longitude: 113.87308, gpsBearing: 244},{latitude: 22.596023, longitude: 113.873069, gpsBearing: 244},{latitude: 22.59602, longitude: 113.873076, gpsBearing: 244},{latitude: 22.596019, longitude: 113.