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

最新推荐文章于 2024-08-06 19:42:37 发布

三无酱

最新推荐文章于 2024-08-06 19:42:37 发布

阅读量403

点赞数

文章标签： python实现轨迹回放

本文链接：https://blog.csdn.net/weixin_30237677/article/details/113660806

版权

本文介绍了微信小程序中使用polyline和marker实现轨迹回放的具体代码和步骤，展示了如何平滑移动小车并处理地图中心点切换，同时记录了在实现过程中遇到的地图显示和层级切换问题。

摘要由CSDN通过智能技术生成

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

具体实现代码：

trackplay.wxml文件

{ {showMessage}}

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.873085, gpsBearing: 244},{latitude: 22.596027, longitude: 113.873101, gpsBearing: 244},{latitude: 22.596018, longitude: 113.873105, gpsBearing: 244},{latitude: 22.596012, longitude: 113.873108, gpsBearing: 244},{latitude: 22.596008, longitude: 113.873111, gpsBearing: 244},{latitude: 22.596009, longitude: 113.873119, gpsBearing: 244},{latitude: 22.59601, longitude: 113.873126, gpsBearing: 244},{latitude: 22.596015, longitude: 113.873135, gpsBearing: 244},{latitude: 22.596017, longitude: 113.873143, gpsBearing: 244},{latitude: 22.596017, longitude: 113.873152, gpsBearing: 244},{latitude: 22.595972, longitude: 113.873132, gpsBearing: 244},{latitude: 22.595979, longitude: 113.873145, gpsBearing: 244},{latitude: 22.595982, longitude: 113.873143, gpsBearing: 244},{latitude: 22.595988, longitude: 113.873132, gpsBearing: 244},{latitude: 22.595988, longitude: 113.873128, gpsBearing: 244},{latitude: 22.59599, longitude: 113.8731