为您推荐:
精华内容
最热下载
问答
  • 5星
    28KB m0_52957036 2019-12-30 19:17:39
  • 5星
    795KB weixin_40228600 2021-04-15 17:31:19
  • 5星
    1.28MB weixin_40228600 2021-06-13 11:21:55
  • 5星
    2.73MB u013883025 2021-06-17 15:41:21
  • 5星
    417KB u013883025 2021-06-09 16:50:02
  • 5星
    2.18MB weixin_40228600 2021-04-30 08:34:08
  • 5星
    1.44MB weixin_40228600 2021-03-04 21:54:49
  • 5星
    166KB weixin_43474701 2021-07-17 12:57:49
  • 5星
    1.29MB weixin_40228600 2021-03-09 08:18:39
  • 5星
    1MB weixin_40228600 2021-05-07 16:02:28
  • 37KB weixin_38625098 2020-10-15 21:20:35
  • 1.轨迹回放实现 2.轨迹回放的实现的可视区域切换 3.画轨迹线中borderWidth设置遇到的坑 4.地图层级导致的轨迹不可见

    微信小程序轨迹回放实现

    微信小程序轨迹回放主要使用到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 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.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.873135, gpsBearing: 244},{latitude: 22.595992, longitude: 113.87314, gpsBearing: 244},{latitude: 22.596003, longitude: 113.873144, gpsBearing: 244},{latitude: 22.596007, longitude: 113.873157, gpsBearing: 244},{latitude: 22.596009, longitude: 113.873165, gpsBearing: 244},{latitude: 22.59602, longitude: 113.873171, gpsBearing: 244},{latitude: 22.596035, longitude: 113.873175, gpsBearing: 244},{latitude: 22.596044, longitude: 113.873179, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873176, gpsBearing: 244},{latitude: 22.59605, longitude: 113.873174, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873177, gpsBearing: 244},{latitude: 22.596048, longitude: 113.87318, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873186, gpsBearing: 244},{latitude: 22.596052, longitude: 113.873188, gpsBearing: 244},{latitude: 22.596053, longitude: 113.873192, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873199, gpsBearing: 244},{latitude: 22.59605, longitude: 113.873199, gpsBearing: 244},{latitude: 22.596054, longitude: 113.873201, gpsBearing: 244},{latitude: 22.596061, longitude: 113.873211, gpsBearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsBearing: 244},{latitude: 22.596064, longitude: 113.87322, gpsBearing: 244},{latitude: 22.59607, longitude: 113.873222, gpsBearing: 244},{latitude: 22.596067, longitude: 113.873219, gpsBearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsBearing: 244},{latitude: 22.59606, longitude: 113.873219, gpsBearing: 244},{latitude: 22.596061, longitude: 113.873213, gpsBearing: 244},{latitude: 22.595382, longitude: 113.873102, gpsBearing: 0},{latitude: 22.595395, longitude: 113.873132, gpsBearing: 0},{latitude: 22.595371, longitude: 113.873124, gpsBearing: 0},{latitude: 22.595353, longitude: 113.873115, gpsBearing: 0},{latitude: 22.595278, longitude: 113.873133, gpsBearing: 0},{latitude: 22.595199, longitude: 113.873142, gpsBearing: 0},{latitude: 22.594997, longitude: 113.87324, gpsBearing: 91},{latitude: 22.595042, longitude: 113.873372, gpsBearing: 157},{latitude: 22.595165, longitude: 113.873482, gpsBearing: 14},{latitude: 22.595167, longitude: 113.873615, gpsBearing: 264},{latitude: 22.595127, longitude: 113.873673, gpsBearing: 229},{latitude: 22.595109, longitude: 113.873692, gpsBearing: 229},{latitude: 22.595107, longitude: 113.873709, gpsBearing: 229},{latitude: 22.595105, longitude: 113.873715, gpsBearing: 229},{latitude: 22.595092, longitude: 113.873767, gpsBearing: 229},{latitude: 22.595017, longitude: 113.873925, gpsBearing: 113},{latitude: 22.594878, longitude: 113.873748, gpsBearing: 242},{latitude: 22.594688, longitude: 113.873477, gpsBearing: 223},{latitude: 22.594547, longitude: 113.873267, gpsBearing: 243},{latitude: 22.594415, longitude: 113.873053, gpsBearing: 228},{latitude: 22.594323, longitude: 113.872878, gpsBearing: 239},{latitude: 22.594276, longitude: 113.872889, gpsBearing: 242},{latitude: 22.594277, longitude: 113.872878, gpsBearing: 242},{latitude: 22.594272, longitude: 113.872867, gpsBearing: 242},{latitude: 22.594252, longitude: 113.872834, gpsBearing: 242},{latitude: 22.594366, longitude: 113.872594, gpsBearing: 321},{latitude: 22.594751, longitude: 113.872271, gpsBearing: 330},{latitude: 22.595176, longitude: 113.871885, gpsBearing: 327},{latitude: 22.595756, longitude: 113.87141, gpsBearing: 326},{latitude: 22.59617, longitude: 113.870976, gpsBearing: 293},{latitude: 22.595982, longitude: 113.870511, gpsBearing: 228},{latitude: 22.595925, longitude: 113.870396, gpsBearing: 231},{latitude: 22.595922, longitude: 113.870391, gpsBearing: 231},{latitude: 22.595921, longitude: 113.870391, gpsBearing: 231},{latitude: 22.595879, longitude: 113.870283, gpsBearing: 251},{latitude: 22.59587, longitude: 113.870271, gpsBearing: 255},{latitude: 22.59585, longitude: 113.870248, gpsBearing: 255},{latitude: 22.595844, longitude: 113.870242, gpsBearing: 255},{latitude: 22.595838, longitude: 113.870234, gpsBearing: 255},{latitude: 22.595833, longitude: 113.870228, gpsBearing: 255},{latitude: 22.595801, longitude: 113.870155, gpsBearing: 255},{latitude: 22.595781, longitude: 113.870103, gpsBearing: 257},{latitude: 22.59577, longitude: 113.870088, gpsBearing: 257},{latitude: 22.595768, longitude: 113.870055, gpsBearing: 257},{latitude: 22.595792, longitude: 113.870001, gpsBearing: 257},{latitude: 22.595883, longitude: 113.869913, gpsBearing: 311},{latitude: 22.596241, longitude: 113.869685, gpsBearing: 340},{latitude: 22.597061, longitude: 113.86915, gpsBearing: 327},{latitude: 22.597764, longitude: 113.868657, gpsBearing: 327},{latitude: 22.598526, longitude: 113.868166, gpsBearing: 330},{latitude: 22.599516, longitude: 113.867496, gpsBearing: 326},{latitude: 22.600336, longitude: 113.866976, gpsBearing: 328},{latitude: 22.601014, longitude: 113.866459, gpsBearing: 325},{latitude: 22.601759, longitude: 113.865882, gpsBearing: 319},{latitude: 22.602108, longitude: 113.865617, gpsBearing: 327},{latitude: 22.602445, longitude: 113.865335, gpsBearing: 322},{latitude: 22.604112, longitude: 113.863745, gpsBearing: 318},{latitude: 22.60445, longitude: 113.863392, gpsBearing: 314},{latitude: 22.604655, longitude: 113.863191, gpsBearing: 317},{latitude: 22.604844, longitude: 113.862974, gpsBearing: 326},{latitude: 22.606299, longitude: 113.861679, gpsBearing: 322},{latitude: 22.60691, longitude: 113.861282, gpsBearing: 332},{latitude: 22.607577, longitude: 113.860947, gpsBearing: 336},{latitude: 22.608198, longitude: 113.860659, gpsBearing: 338},{latitude: 22.608535, longitude: 113.860509, gpsBearing: 344},{latitude: 22.608922, longitude: 113.860322, gpsBearing: 332},{latitude: 22.609435, longitude: 113.860072, gpsBearing: 338},{latitude: 22.61004, longitude: 113.859761, gpsBearing: 334},{latitude: 22.610392, longitude: 113.859548, gpsBearing: 335},{latitude: 22.61047, longitude: 113.859458, gpsBearing: 338},{latitude: 22.610558, longitude: 113.859366, gpsBearing: 338},{latitude: 22.610873, longitude: 113.85919, gpsBearing: 333},{latitude: 22.611081, longitude: 113.859092, gpsBearing: 331},{latitude: 22.611356, longitude: 113.858966, gpsBearing: 340},{latitude: 22.611655, longitude: 113.858828, gpsBearing: 333},{latitude: 22.612054, longitude: 113.858623, gpsBearing: 334},{latitude: 22.612305, longitude: 113.858503, gpsBearing: 335},{latitude: 22.612555, longitude: 113.858369, gpsBearing: 335},{latitude: 22.612731, longitude: 113.858277, gpsBearing: 334},{latitude: 22.613101, longitude: 113.858116, gpsBearing: 343},{latitude: 22.613474, longitude: 113.85796, gpsBearing: 341},{latitude: 22.614135, longitude: 113.857541, gpsBearing: 328},{latitude: 22.615013, longitude: 113.856929, gpsBearing: 326},{latitude: 22.616048, longitude: 113.85613, gpsBearing: 322},{latitude: 22.617079, longitude: 113.855296, gpsBearing: 319},{latitude: 22.61802, longitude: 113.854498, gpsBearing: 321},{latitude: 22.618689, longitude: 113.853904, gpsBearing: 321},{latitude: 22.619046, longitude: 113.85358, gpsBearing: 318},{latitude: 22.619278, longitude: 113.853376, gpsBearing: 316},{latitude: 22.619668, longitude: 113.853046, gpsBearing: 329},{latitude: 22.620248, longitude: 113.852555, gpsBearing: 320},{latitude: 22.62042, longitude: 113.85239, gpsBearing: 321},{latitude: 22.62085, longitude: 113.852022, gpsBearing: 321},{latitude: 22.621188, longitude: 113.851787, gpsBearing: 337},{latitude: 22.62167, longitude: 113.851444, gpsBearing: 326},{latitude: 22.622059, longitude: 113.851191, gpsBearing: 331},{latitude: 22.622527, longitude: 113.850892, gpsBearing: 330},{latitude: 22.622824, longitude: 113.850735, gpsBearing: 340},{latitude: 22.623182, longitude: 113.850531, gpsBearing: 332},{latitude: 22.623666, longitude: 113.850243, gpsBearing: 333},{latitude: 22.624357, longitude: 113.84992, gpsBearing: 337},{latitude: 22.624972, longitude: 113.849677, gpsBearing: 342},{latitude: 22.625648, longitude: 113.849314, gpsBearing: 327},{latitude: 22.626399, longitude: 113.848871, gpsBearing: 332},{latitude: 22.626952, longitude: 113.848533, gpsBearing: 328},{latitude: 22.627567, longitude: 113.848077, gpsBearing: 324},{latitude: 22.628267, longitude: 113.847538, gpsBearing: 325},{latitude: 22.62907, longitude: 113.846803, gpsBearing: 320},{latitude: 22.629844, longitude: 113.846088, gpsBearing: 319},{latitude: 22.630508, longitude: 113.845474, gpsBearing: 320},{latitude: 22.631219, longitude: 113.844839, gpsBearing: 320},{latitude: 22.631904, longitude: 113.844202, gpsBearing: 317},{latitude: 22.6326, longitude: 113.843615, gpsBearing: 323},{latitude: 22.63327, longitude: 113.84305, gpsBearing: 319},{latitude: 22.63395, longitude: 113.84246, gpsBearing: 321},{latitude: 22.634749, longitude: 113.841687, gpsBearing: 314},{latitude: 22.635693, longitude: 113.840785, gpsBearing: 318},{latitude: 22.636531, longitude: 113.839701, gpsBearing: 302},{latitude: 22.637421, longitude: 113.838755, gpsBearing: 320},{latitude: 22.638429, longitude: 113.837917, gpsBearing: 318},{latitude: 22.639228, longitude: 113.837153, gpsBearing: 318},{latitude: 22.639727, longitude: 113.836756, gpsBearing: 325},{latitude: 22.640429, longitude: 113.836294, gpsBearing: 330},{latitude: 22.640876, longitude: 113.836018, gpsBearing: 332},{latitude: 22.641161, longitude: 113.835815, gpsBearing: 324},{latitude: 22.641617, longitude: 113.835526, gpsBearing: 334},{latitude: 22.642177, longitude: 113.835227, gpsBearing: 331},{latitude: 22.642515, longitude: 113.834992, gpsBearing: 320},{latitude: 22.643021, longitude: 113.834658, gpsBearing: 329},{latitude: 22.643557, longitude: 113.834292, gpsBearing: 328},{latitude: 22.644073, longitude: 113.833943, gpsBearing: 327},{latitude: 22.644542, longitude: 113.833564, gpsBearing: 319},{latitude: 22.645273, longitude: 113.832871, gpsBearing: 319},{latitude: 22.64629, longitude: 113.832075, gpsBearing: 321},{latitude: 22.647176, longitude: 113.831203, gpsBearing: 315},{latitude: 22.648153, longitude: 113.830214, gpsBearing: 316},{latitude: 22.64912, longitude: 113.829231, gpsBearing: 316},{latitude: 22.649892, longitude: 113.828469, gpsBearing: 319},{latitude: 22.650929, longitude: 113.827758, gpsBearing: 334},{latitude: 22.652273, longitude: 113.82722, gpsBearing: 346},{latitude: 22.653721, longitude: 113.827043, gpsBearing: 0},{latitude: 22.65517, longitude: 113.827253, gpsBearing: 14},{latitude: 22.656599, longitude: 113.827553, gpsBearing: 11},{latitude: 22.658001, longitude: 113.827843, gpsBearing: 10},{latitude: 22.659265, longitude: 113.828104, gpsBearing: 10},{latitude: 22.660267, longitude: 113.828311, gpsBearing: 11},{latitude: 22.661353, longitude: 113.828523, gpsBearing: 10},{latitude: 22.662587, longitude: 113.828707, gpsBearing: 5},{latitude: 22.663792, longitude: 113.828852, gpsBearing: 9},{latitude: 22.664849, longitude: 113.828935, gpsBearing: 358},{latitude: 22.666112, longitude: 113.828927, gpsBearing: 0},{latitude: 22.66696, longitude: 113.828904, gpsBearing: 0},{latitude: 22.6682, longitude: 113.828904, gpsBearing: 1},{latitude: 22.669147, longitude: 113.828892, gpsBearing: 357},{latitude: 22.670029, longitude: 113.82891, gpsBearing: 1},{latitude: 22.670366, longitude: 113.829053, gpsBearing: 74},{latitude: 22.670421, longitude: 113.829364, gpsBearing: 90},{latitude: 22.670444, longitude: 113.829855, gpsBearing: 93},{latitude: 22.670461, longitude: 113.830243, gpsBearing: 77},{latitude: 22.670541, longitude: 113.830399, gpsBearing: 21},{latitude: 22.670909, longitude: 113.83034, gpsBearing: 349},{latitude: 22.671146, longitude: 113.830415, gpsBearing: 38},{latitude: 22.671149, longitude: 113.830554, gpsBearing: 143},{latitude: 22.671147, longitude: 113.830591, gpsBearing: 103},{latitude: 22.671211, longitude: 113.830701, gpsBearing: 59},{latitude: 22.671229, longitude: 113.830758, gpsBearing: 54},{latitude: 22.671152, longitude: 113.830826, gpsBearing: 141},{latitude: 22.671181, longitude: 113.830789, gpsBearing: 148},{latitude: 22.671081, longitude: 113.830807, gpsBearing: 173},{latitude: 22.671056, longitude: 113.830823, gpsBearing: 176},{latitude: 22.671067, longitude: 113.830761, gpsBearing: 197},{latitude: 22.671138, longitude: 113.830843, gpsBearing: 199},{latitude: 22.67108, longitude: 113.830825, gpsBearing: 204},{latitude: 22.671102, longitude: 113.830873, gpsBearing: 210},{latitude: 22.671024, longitude: 113.830966, gpsBearing: 200},{latitude: 22.670681, longitude: 113.830952, gpsBearing: 146},{latitude: 22.670178, longitude: 113.830837, gpsBearing: 182},{latitude: 22.671683, longitude: 113.830848, gpsBearing: 63},{latitude: 22.671662, longitude: 113.830848, gpsBearing: 63},{latitude: 22.671662, longitude: 113.830841, gpsBearing: 55},{latitude: 22.671555, longitude: 113.83088, gpsBearing: 20},{latitude: 22.671481, longitude: 113.830897, gpsBearing: 11},{latitude: 22.671486, longitude: 113.830877, gpsBearing: 11},{latitude: 22.671422, longitude: 113.830844, gpsBearing: 11},{latitude: 22.6714, longitude: 113.830852, gpsBearing: 11},{latitude: 22.671388, longitude: 113.830872, gpsBearing: 11},{latitude: 22.671458, longitude: 113.830874, gpsBearing: 11},{latitude: 22.671463, longitude: 113.830894, gpsBearing: 11},{latitude: 22.671475, longitude: 113.830892, gpsBearing: 11},{latitude: 22.671493, longitude: 113.830812, gpsBearing: 11},{latitude: 22.67146, longitude: 113.830784, gpsBearing: 11},{latitude: 22.671443, longitude: 113.830807, gpsBearing: 11},{latitude: 22.671389, longitude: 113.830789, gpsBearing: 11},{latitude: 22.671289, longitude: 113.830735, gpsBearing: 11},{latitude: 22.671227, longitude: 113.830663, gpsBearing: 11},{latitude: 22.671224, longitude: 113.830673, gpsBearing: 11},{latitude: 22.671251, longitude: 113.830766, gpsBearing: 11},{latitude: 22.671234, longitude: 113.830775, gpsBearing: 11},{latitude: 22.67121, longitude: 113.830679, gpsBearing: 11},{latitude: 22.67117, longitude: 113.83051, gpsBearing: 11},{latitude: 22.671142, longitude: 113.830573, gpsBearing: 11},{latitude: 22.670879, longitude: 113.830429, gpsBearing: 348},{latitude: 22.670907, longitude: 113.830445, gpsBearing: 260},{latitude: 22.670978, longitude: 113.830479, gpsBearing: 224},{latitude: 22.671004, longitude: 113.830568, gpsBearing: 224},{latitude: 22.670994, longitude: 113.830727, gpsBearing: 153},{latitude: 22.670997, longitude: 113.830757, gpsBearing: 161},{latitude: 22.671047, longitude: 113.830795, gpsBearing: 166},{latitude: 22.671073, longitude: 113.830817, gpsBearing: 169},{latitude: 22.671085, longitude: 113.830824, gpsBearing: 169},{latitude: 22.671058, longitude: 113.830814, gpsBearing: 169},{latitude: 22.671086, longitude: 113.830899, gpsBearing: 169},{latitude: 22.671089, longitude: 113.830965, gpsBearing: 169},{latitude: 22.671117, longitude: 113.830947, gpsBearing: 169},{latitude: 22.671631, longitude: 113.831154, gpsBearing: 158},{latitude: 22.6716, longitude: 113.831148, gpsBearing: 145},{latitude: 22.67152, longitude: 113.831287, gpsBearing: 145},{latitude: 22.671486, longitude: 113.831509, gpsBearing: 77},{latitude: 22.67135, longitude: 113.831558, gpsBearing: 96},{latitude: 22.671349, longitude: 113.831529, gpsBearing: 102},{latitude: 22.671346, longitude: 113.831489, gpsBearing: 95},{latitude: 22.671388, longitude: 113.831372, gpsBearing: 95},{latitude: 22.671386, longitude: 113.831333, gpsBearing: 95},{latitude: 22.671407, longitude: 113.831286, gpsBearing: 95},{latitude: 22.671292, longitude: 113.831228, gpsBearing: 95},{latitude: 22.671025, longitude: 113.831196, gpsBearing: 149},{latitude: 22.671026, longitude: 113.831183, gpsBearing: 180},{latitude: 22.671076, longitude: 113.83113, gpsBearing: 180},{latitude: 22.671119, longitude: 113.831024, gpsBearing: 180},{latitude: 22.67117, longitude: 113.830974, gpsBearing: 180},{latitude: 22.67112, longitude: 113.830935, gpsBearing: 180},{latitude: 22.671233, longitude: 113.830912, gpsBearing: 180},{latitude: 22.671269, longitude: 113.830879, gpsBearing: 180},{latitude: 22.671215, longitude: 113.830906, gpsBearing: 180},{latitude: 22.6712, longitude: 113.830907, gpsBearing: 180},{latitude: 22.671278, longitude: 113.830979, gpsBearing: 180},{latitude: 22.671498, longitude: 113.831101, gpsBearing: 180},{latitude: 22.671705, longitude: 113.831304, gpsBearing: 43},{latitude: 22.671713, longitude: 113.831276, gpsBearing: 297},{latitude: 22.67165, longitude: 113.831221, gpsBearing: 298},{latitude: 22.671617, longitude: 113.83117, gpsBearing: 312},{latitude: 22.671463, longitude: 113.831156, gpsBearing: 326},{latitude: 22.671413, longitude: 113.831106, gpsBearing: 339},{latitude: 22.671225, longitude: 113.831049, gpsBearing: 353},{latitude: 22.670929, longitude: 113.830936, gpsBearing: 99},{latitude: 22.670841, longitude: 113.83088, gpsBearing: 225},{latitude: 22.671066, longitude: 113.830904, gpsBearing: 231},{latitude: 22.671164, longitude: 113.830972, gpsBearing: 20},{latitude: 22.671189, longitude: 113.83107, gpsBearing: 22},{latitude: 22.671145, longitude: 113.831111, gpsBearing: 29},{latitude: 22.671133, longitude: 113.830951, gpsBearing: 34},{latitude: 22.671185, longitude: 113.830818, gpsBearing: 29},{latitude: 22.671209, longitude: 113.830802, gpsBearing: 348},{latitude: 22.671145, longitude: 113.830834, gpsBearing: 348},{latitude: 22.67109, longitude: 113.830825, gpsBearing: 348},{latitude: 22.671034, longitude: 113.830765, gpsBearing: 348},{latitude: 22.671065, longitude: 113.830838, gpsBearing: 348},{latitude: 22.671175, longitude: 113.830935, gpsBearing: 348},{latitude: 22.671178, longitude: 113.830935, gpsBearing: 348},{latitude: 22.671248, longitude: 113.830893, gpsBearing: 348},{latitude: 22.671134, longitude: 113.83089, gpsBearing: 348},{latitude: 22.671147, longitude: 113.830964, gpsBearing: 348},{latitude: 22.671283, longitude: 113.831064, gpsBearing: 348},{latitude: 22.671341, longitude: 113.831058, gpsBearing: 348}],
          color: "#7b7af8",
          width: 5,
          //borderWidth: 2,
          borderColor: '#7b7af8',
          level: 'abovebuildings',      //压盖关系
          arrowLine: true               //带箭头的线
        }],
        polygons: [],
        mapSettings: {               //统一设置地图配置
          skew: 0,                  //倾斜角度
          rotate: 0,                //旋转角度
          showScale: false,         //显示比例尺,工具暂不支持
          subKey: '',               //个性化地图使用的key
          layerStyle: 1,            //个性化地图配置的 style
          enableZoom: true,         //缩放
          enableScroll: true,       //拖动
          enableRotate: false,      //旋转
          showCompass: false,         //指南针
          enable3D: false,            //展示3D楼块(工具暂不支持)
          enableOverlooking: false,   //俯视
          enableSatellite: false,     //卫星图
          enableTraffic: false,       //实时路况
        },
        playIndex: 0,
        showMessage: "",
        step: 1,
        duration: 100,
        maxDuration: 2000,
        minDuration: 500,
        isPause: false
      },
      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({
            markerId: 1,
            autoRotate: true,
            moveWithRotate: true,
            duration: 1000,
            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({
            markerId: 1,
            autoRotate: false,
            moveWithRotate: true,
            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({
          playIndex: 0,
          '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({
            isPause: true
          });
        }
    
      },
      trackerPlay: function () {
        if (this.data.isPause) {
          this.beginTrack();
          this.setData({
            isPause: false
          });
        }
    
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.mapCtx = wx.createMapContext('mymap');
        this.trackPlay();
      },
    })

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

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

     

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

     

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

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

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

    以上两个问题都没找到解决办法,有解决办法的可以给我发消息告诉我

     

     

     腾讯位置服务征文大赛邀你报名!报名链接,二维码:

    展开全文
    keenw 2020-12-29 20:23:46
  • 微信小程序轨迹回放主要使用到polyline进行划线操作,以及使用marker去进行小车移动操作。效果图如下: 具体实现代码: trackplay.wxml文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!--pages/...

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

    具体实现代码:

    trackplay.wxml文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!--pages/tracker/tracker.wxml-->
    <map id="mymap" longitude="{{mapCenter.longitude}}" latitude="{{mapCenter.latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polylineSettings}}" include-points="polygons" setting="{{mapSettings}}" bindregiοnchange="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 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文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    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.873135, gpsBearing: 244},{latitude: 22.595992, longitude: 113.87314, gpsBearing: 244},{latitude: 22.596003, longitude: 113.873144, gpsBearing: 244},{latitude: 22.596007, longitude: 113.873157, gpsBearing: 244},{latitude: 22.596009, longitude: 113.873165, gpsBearing: 244},{latitude: 22.59602, longitude: 113.873171, gpsBearing: 244},{latitude: 22.596035, longitude: 113.873175, gpsBearing: 244},{latitude: 22.596044, longitude: 113.873179, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873176, gpsBearing: 244},{latitude: 22.59605, longitude: 113.873174, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873177, gpsBearing: 244},{latitude: 22.596048, longitude: 113.87318, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873186, gpsBearing: 244},{latitude: 22.596052, longitude: 113.873188, gpsBearing: 244},{latitude: 22.596053, longitude: 113.873192, gpsBearing: 244},{latitude: 22.596049, longitude: 113.873199, gpsBearing: 244},{latitude: 22.59605, longitude: 113.873199, gpsBearing: 244},{latitude: 22.596054, longitude: 113.873201, gpsBearing: 244},{latitude: 22.596061, longitude: 113.873211, gpsBearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsBearing: 244},{latitude: 22.596064, longitude: 113.87322, gpsBearing: 244},{latitude: 22.59607, longitude: 113.873222, gpsBearing: 244},{latitude: 22.596067, longitude: 113.873219, gpsBearing: 244},{latitude: 22.596063, longitude: 113.873215, gpsBearing: 244},{latitude: 22.59606, longitude: 113.873219, gpsBearing: 244},{latitude: 22.596061, longitude: 113.873213, gpsBearing: 244},{latitude: 22.595382, longitude: 113.873102, gpsBearing: 0},{latitude: 22.595395, longitude: 113.873132, gpsBearing: 0},{latitude: 22.595371, longitude: 113.873124, gpsBearing: 0},{latitude: 22.595353, longitude: 113.873115, gpsBearing: 0},{latitude: 22.595278, longitude: 113.873133, gpsBearing: 0},{latitude: 22.595199, longitude: 113.873142, gpsBearing: 0},{latitude: 22.594997, longitude: 113.87324, gpsBearing: 91},{latitude: 22.595042, longitude: 113.873372, gpsBearing: 157},{latitude: 22.595165, longitude: 113.873482, gpsBearing: 14},{latitude: 22.595167, longitude: 113.873615, gpsBearing: 264},{latitude: 22.595127, longitude: 113.873673, gpsBearing: 229},{latitude: 22.595109, longitude: 113.873692, gpsBearing: 229},{latitude: 22.595107, longitude: 113.873709, gpsBearing: 229},{latitude: 22.595105, longitude: 113.873715, gpsBearing: 229},{latitude: 22.595092, longitude: 113.873767, gpsBearing: 229},{latitude: 22.595017, longitude: 113.873925, gpsBearing: 113},{latitude: 22.594878, longitude: 113.873748, gpsBearing: 242},{latitude: 22.594688, longitude: 113.873477, gpsBearing: 223},{latitude: 22.594547, longitude: 113.873267, gpsBearing: 243},{latitude: 22.594415, longitude: 113.873053, gpsBearing: 228},{latitude: 22.594323, longitude: 113.872878, gpsBearing: 239},{latitude: 22.594276, longitude: 113.872889, gpsBearing: 242},{latitude: 22.594277, longitude: 113.872878, gpsBearing: 242},{latitude: 22.594272, longitude: 113.872867, gpsBearing: 242},{latitude: 22.594252, longitude: 113.872834, gpsBearing: 242},{latitude: 22.594366, longitude: 113.872594, gpsBearing: 321},{latitude: 22.594751, longitude: 113.872271, gpsBearing: 330},{latitude: 22.595176, longitude: 113.871885, gpsBearing: 327},{latitude: 22.595756, longitude: 113.87141, gpsBearing: 326},{latitude: 22.59617, longitude: 113.870976, gpsBearing: 293},{latitude: 22.595982, longitude: 113.870511, gpsBearing: 228},{latitude: 22.595925, longitude: 113.870396, gpsBearing: 231},{latitude: 22.595922, longitude: 113.870391, gpsBearing: 231},{latitude: 22.595921, longitude: 113.870391, gpsBearing: 231},{latitude: 22.595879, longitude: 113.870283, gpsBearing: 251},{latitude: 22.59587, longitude: 113.870271, gpsBearing: 255},{latitude: 22.59585, longitude: 113.870248, gpsBearing: 255},{latitude: 22.595844, longitude: 113.870242, gpsBearing: 255},{latitude: 22.595838, longitude: 113.870234, gpsBearing: 255},{latitude: 22.595833, longitude: 113.870228, gpsBearing: 255},{latitude: 22.595801, longitude: 113.870155, gpsBearing: 255},{latitude: 22.595781, longitude: 113.870103, gpsBearing: 257},{latitude: 22.59577, longitude: 113.870088, gpsBearing: 257},{latitude: 22.595768, longitude: 113.870055, gpsBearing: 257},{latitude: 22.595792, longitude: 113.870001, gpsBearing: 257},{latitude: 22.595883, longitude: 113.869913, gpsBearing: 311},{latitude: 22.596241, longitude: 113.869685, gpsBearing: 340},{latitude: 22.597061, longitude: 113.86915, gpsBearing: 327},{latitude: 22.597764, longitude: 113.868657, gpsBearing: 327},{latitude: 22.598526, longitude: 113.868166, gpsBearing: 330},{latitude: 22.599516, longitude: 113.867496, gpsBearing: 326},{latitude: 22.600336, longitude: 113.866976, gpsBearing: 328},{latitude: 22.601014, longitude: 113.866459, gpsBearing: 325},{latitude: 22.601759, longitude: 113.865882, gpsBearing: 319},{latitude: 22.602108, longitude: 113.865617, gpsBearing: 327},{latitude: 22.602445, longitude: 113.865335, gpsBearing: 322},{latitude: 22.604112, longitude: 113.863745, gpsBearing: 318},{latitude: 22.60445, longitude: 113.863392, gpsBearing: 314},{latitude: 22.604655, longitude: 113.863191, gpsBearing: 317},{latitude: 22.604844, longitude: 113.862974, gpsBearing: 326},{latitude: 22.606299, longitude: 113.861679, gpsBearing: 322},{latitude: 22.60691, longitude: 113.861282, gpsBearing: 332},{latitude: 22.607577, longitude: 113.860947, gpsBearing: 336},{latitude: 22.608198, longitude: 113.860659, gpsBearing: 338},{latitude: 22.608535, longitude: 113.860509, gpsBearing: 344},{latitude: 22.608922, longitude: 113.860322, gpsBearing: 332},{latitude: 22.609435, longitude: 113.860072, gpsBearing: 338},{latitude: 22.61004, longitude: 113.859761, gpsBearing: 334},{latitude: 22.610392, longitude: 113.859548, gpsBearing: 335},{latitude: 22.61047, longitude: 113.859458, gpsBearing: 338},{latitude: 22.610558, longitude: 113.859366, gpsBearing: 338},{latitude: 22.610873, longitude: 113.85919, gpsBearing: 333},{latitude: 22.611081, longitude: 113.859092, gpsBearing: 331},{latitude: 22.611356, longitude: 113.858966, gpsBearing: 340},{latitude: 22.611655, longitude: 113.858828, gpsBearing: 333},{latitude: 22.612054, longitude: 113.858623, gpsBearing: 334},{latitude: 22.612305, longitude: 113.858503, gpsBearing: 335},{latitude: 22.612555, longitude: 113.858369, gpsBearing: 335},{latitude: 22.612731, longitude: 113.858277, gpsBearing: 334},{latitude: 22.613101, longitude: 113.858116, gpsBearing: 343},{latitude: 22.613474, longitude: 113.85796, gpsBearing: 341},{latitude: 22.614135, longitude: 113.857541, gpsBearing: 328},{latitude: 22.615013, longitude: 113.856929, gpsBearing: 326},{latitude: 22.616048, longitude: 113.85613, gpsBearing: 322},{latitude: 22.617079, longitude: 113.855296, gpsBearing: 319},{latitude: 22.61802, longitude: 113.854498, gpsBearing: 321},{latitude: 22.618689, longitude: 113.853904, gpsBearing: 321},{latitude: 22.619046, longitude: 113.85358, gpsBearing: 318},{latitude: 22.619278, longitude: 113.853376, gpsBearing: 316},{latitude: 22.619668, longitude: 113.853046, gpsBearing: 329},{latitude: 22.620248, longitude: 113.852555, gpsBearing: 320},{latitude: 22.62042, longitude: 113.85239, gpsBearing: 321},{latitude: 22.62085, longitude: 113.852022, gpsBearing: 321},{latitude: 22.621188, longitude: 113.851787, gpsBearing: 337},{latitude: 22.62167, longitude: 113.851444, gpsBearing: 326},{latitude: 22.622059, longitude: 113.851191, gpsBearing: 331},{latitude: 22.622527, longitude: 113.850892, gpsBearing: 330},{latitude: 22.622824, longitude: 113.850735, gpsBearing: 340},{latitude: 22.623182, longitude: 113.850531, gpsBearing: 332},{latitude: 22.623666, longitude: 113.850243, gpsBearing: 333},{latitude: 22.624357, longitude: 113.84992, gpsBearing: 337},{latitude: 22.624972, longitude: 113.849677, gpsBearing: 342},{latitude: 22.625648, longitude: 113.849314, gpsBearing: 327},{latitude: 22.626399, longitude: 113.848871, gpsBearing: 332},{latitude: 22.626952, longitude: 113.848533, gpsBearing: 328},{latitude: 22.627567, longitude: 113.848077, gpsBearing: 324},{latitude: 22.628267, longitude: 113.847538, gpsBearing: 325},{latitude: 22.62907, longitude: 113.846803, gpsBearing: 320},{latitude: 22.629844, longitude: 113.846088, gpsBearing: 319},{latitude: 22.630508, longitude: 113.845474, gpsBearing: 320},{latitude: 22.631219, longitude: 113.844839, gpsBearing: 320},{latitude: 22.631904, longitude: 113.844202, gpsBearing: 317},{latitude: 22.6326, longitude: 113.843615, gpsBearing: 323},{latitude: 22.63327, longitude: 113.84305, gpsBearing: 319},{latitude: 22.63395, longitude: 113.84246, gpsBearing: 321},{latitude: 22.634749, longitude: 113.841687, gpsBearing: 314},{latitude: 22.635693, longitude: 113.840785, gpsBearing: 318},{latitude: 22.636531, longitude: 113.839701, gpsBearing: 302},{latitude: 22.637421, longitude: 113.838755, gpsBearing: 320},{latitude: 22.638429, longitude: 113.837917, gpsBearing: 318},{latitude: 22.639228, longitude: 113.837153, gpsBearing: 318},{latitude: 22.639727, longitude: 113.836756, gpsBearing: 325},{latitude: 22.640429, longitude: 113.836294, gpsBearing: 330},{latitude: 22.640876, longitude: 113.836018, gpsBearing: 332},{latitude: 22.641161, longitude: 113.835815, gpsBearing: 324},{latitude: 22.641617, longitude: 113.835526, gpsBearing: 334},{latitude: 22.642177, longitude: 113.835227, gpsBearing: 331},{latitude: 22.642515, longitude: 113.834992, gpsBearing: 320},{latitude: 22.643021, longitude: 113.834658, gpsBearing: 329},{latitude: 22.643557, longitude: 113.834292, gpsBearing: 328},{latitude: 22.644073, longitude: 113.833943, gpsBearing: 327},{latitude: 22.644542, longitude: 113.833564, gpsBearing: 319},{latitude: 22.645273, longitude: 113.832871, gpsBearing: 319},{latitude: 22.64629, longitude: 113.832075, gpsBearing: 321},{latitude: 22.647176, longitude: 113.831203, gpsBearing: 315},{latitude: 22.648153, longitude: 113.830214, gpsBearing: 316},{latitude: 22.64912, longitude: 113.829231, gpsBearing: 316},{latitude: 22.649892, longitude: 113.828469, gpsBearing: 319},{latitude: 22.650929, longitude: 113.827758, gpsBearing: 334},{latitude: 22.652273, longitude: 113.82722, gpsBearing: 346},{latitude: 22.653721, longitude: 113.827043, gpsBearing: 0},{latitude: 22.65517, longitude: 113.827253, gpsBearing: 14},{latitude: 22.656599, longitude: 113.827553, gpsBearing: 11},{latitude: 22.658001, longitude: 113.827843, gpsBearing: 10},{latitude: 22.659265, longitude: 113.828104, gpsBearing: 10},{latitude: 22.660267, longitude: 113.828311, gpsBearing: 11},{latitude: 22.661353, longitude: 113.828523, gpsBearing: 10},{latitude: 22.662587, longitude: 113.828707, gpsBearing: 5},{latitude: 22.663792, longitude: 113.828852, gpsBearing: 9},{latitude: 22.664849, longitude: 113.828935, gpsBearing: 358},{latitude: 22.666112, longitude: 113.828927, gpsBearing: 0},{latitude: 22.66696, longitude: 113.828904, gpsBearing: 0},{latitude: 22.6682, longitude: 113.828904, gpsBearing: 1},{latitude: 22.669147, longitude: 113.828892, gpsBearing: 357},{latitude: 22.670029, longitude: 113.82891, gpsBearing: 1},{latitude: 22.670366, longitude: 113.829053, gpsBearing: 74},{latitude: 22.670421, longitude: 113.829364, gpsBearing: 90},{latitude: 22.670444, longitude: 113.829855, gpsBearing: 93},{latitude: 22.670461, longitude: 113.830243, gpsBearing: 77},{latitude: 22.670541, longitude: 113.830399, gpsBearing: 21},{latitude: 22.670909, longitude: 113.83034, gpsBearing: 349},{latitude: 22.671146, longitude: 113.830415, gpsBearing: 38},{latitude: 22.671149, longitude: 113.830554, gpsBearing: 143},{latitude: 22.671147, longitude: 113.830591, gpsBearing: 103},{latitude: 22.671211, longitude: 113.830701, gpsBearing: 59},{latitude: 22.671229, longitude: 113.830758, gpsBearing: 54},{latitude: 22.671152, longitude: 113.830826, gpsBearing: 141},{latitude: 22.671181, longitude: 113.830789, gpsBearing: 148},{latitude: 22.671081, longitude: 113.830807, gpsBearing: 173},{latitude: 22.671056, longitude: 113.830823, gpsBearing: 176},{latitude: 22.671067, longitude: 113.830761, gpsBearing: 197},{latitude: 22.671138, longitude: 113.830843, gpsBearing: 199},{latitude: 22.67108, longitude: 113.830825, gpsBearing: 204},{latitude: 22.671102, longitude: 113.830873, gpsBearing: 210},{latitude: 22.671024, longitude: 113.830966, gpsBearing: 200},{latitude: 22.670681, longitude: 113.830952, gpsBearing: 146},{latitude: 22.670178, longitude: 113.830837, gpsBearing: 182},{latitude: 22.671683, longitude: 113.830848, gpsBearing: 63},{latitude: 22.671662, longitude: 113.830848, gpsBearing: 63},{latitude: 22.671662, longitude: 113.830841, gpsBearing: 55},{latitude: 22.671555, longitude: 113.83088, gpsBearing: 20},{latitude: 22.671481, longitude: 113.830897, gpsBearing: 11},{latitude: 22.671486, longitude: 113.830877, gpsBearing: 11},{latitude: 22.671422, longitude: 113.830844, gpsBearing: 11},{latitude: 22.6714, longitude: 113.830852, gpsBearing: 11},{latitude: 22.671388, longitude: 113.830872, gpsBearing: 11},{latitude: 22.671458, longitude: 113.830874, gpsBearing: 11},{latitude: 22.671463, longitude: 113.830894, gpsBearing: 11},{latitude: 22.671475, longitude: 113.830892, gpsBearing: 11},{latitude: 22.671493, longitude: 113.830812, gpsBearing: 11},{latitude: 22.67146, longitude: 113.830784, gpsBearing: 11},{latitude: 22.671443, longitude: 113.830807, gpsBearing: 11},{latitude: 22.671389, longitude: 113.830789, gpsBearing: 11},{latitude: 22.671289, longitude: 113.830735, gpsBearing: 11},{latitude: 22.671227, longitude: 113.830663, gpsBearing: 11},{latitude: 22.671224, longitude: 113.830673, gpsBearing: 11},{latitude: 22.671251, longitude: 113.830766, gpsBearing: 11},{latitude: 22.671234, longitude: 113.830775, gpsBearing: 11},{latitude: 22.67121, longitude: 113.830679, gpsBearing: 11},{latitude: 22.67117, longitude: 113.83051, gpsBearing: 11},{latitude: 22.671142, longitude: 113.830573, gpsBearing: 11},{latitude: 22.670879, longitude: 113.830429, gpsBearing: 348},{latitude: 22.670907, longitude: 113.830445, gpsBearing: 260},{latitude: 22.670978, longitude: 113.830479, gpsBearing: 224},{latitude: 22.671004, longitude: 113.830568, gpsBearing: 224},{latitude: 22.670994, longitude: 113.830727, gpsBearing: 153},{latitude: 22.670997, longitude: 113.830757, gpsBearing: 161},{latitude: 22.671047, longitude: 113.830795, gpsBearing: 166},{latitude: 22.671073, longitude: 113.830817, gpsBearing: 169},{latitude: 22.671085, longitude: 113.830824, gpsBearing: 169},{latitude: 22.671058, longitude: 113.830814, gpsBearing: 169},{latitude: 22.671086, longitude: 113.830899, gpsBearing: 169},{latitude: 22.671089, longitude: 113.830965, gpsBearing: 169},{latitude: 22.671117, longitude: 113.830947, gpsBearing: 169},{latitude: 22.671631, longitude: 113.831154, gpsBearing: 158},{latitude: 22.6716, longitude: 113.831148, gpsBearing: 145},{latitude: 22.67152, longitude: 113.831287, gpsBearing: 145},{latitude: 22.671486, longitude: 113.831509, gpsBearing: 77},{latitude: 22.67135, longitude: 113.831558, gpsBearing: 96},{latitude: 22.671349, longitude: 113.831529, gpsBearing: 102},{latitude: 22.671346, longitude: 113.831489, gpsBearing: 95},{latitude: 22.671388, longitude: 113.831372, gpsBearing: 95},{latitude: 22.671386, longitude: 113.831333, gpsBearing: 95},{latitude: 22.671407, longitude: 113.831286, gpsBearing: 95},{latitude: 22.671292, longitude: 113.831228, gpsBearing: 95},{latitude: 22.671025, longitude: 113.831196, gpsBearing: 149},{latitude: 22.671026, longitude: 113.831183, gpsBearing: 180},{latitude: 22.671076, longitude: 113.83113, gpsBearing: 180},{latitude: 22.671119, longitude: 113.831024, gpsBearing: 180},{latitude: 22.67117, longitude: 113.830974, gpsBearing: 180},{latitude: 22.67112, longitude: 113.830935, gpsBearing: 180},{latitude: 22.671233, longitude: 113.830912, gpsBearing: 180},{latitude: 22.671269, longitude: 113.830879, gpsBearing: 180},{latitude: 22.671215, longitude: 113.830906, gpsBearing: 180},{latitude: 22.6712, longitude: 113.830907, gpsBearing: 180},{latitude: 22.671278, longitude: 113.830979, gpsBearing: 180},{latitude: 22.671498, longitude: 113.831101, gpsBearing: 180},{latitude: 22.671705, longitude: 113.831304, gpsBearing: 43},{latitude: 22.671713, longitude: 113.831276, gpsBearing: 297},{latitude: 22.67165, longitude: 113.831221, gpsBearing: 298},{latitude: 22.671617, longitude: 113.83117, gpsBearing: 312},{latitude: 22.671463, longitude: 113.831156, gpsBearing: 326},{latitude: 22.671413, longitude: 113.831106, gpsBearing: 339},{latitude: 22.671225, longitude: 113.831049, gpsBearing: 353},{latitude: 22.670929, longitude: 113.830936, gpsBearing: 99},{latitude: 22.670841, longitude: 113.83088, gpsBearing: 225},{latitude: 22.671066, longitude: 113.830904, gpsBearing: 231},{latitude: 22.671164, longitude: 113.830972, gpsBearing: 20},{latitude: 22.671189, longitude: 113.83107, gpsBearing: 22},{latitude: 22.671145, longitude: 113.831111, gpsBearing: 29},{latitude: 22.671133, longitude: 113.830951, gpsBearing: 34},{latitude: 22.671185, longitude: 113.830818, gpsBearing: 29},{latitude: 22.671209, longitude: 113.830802, gpsBearing: 348},{latitude: 22.671145, longitude: 113.830834, gpsBearing: 348},{latitude: 22.67109, longitude: 113.830825, gpsBearing: 348},{latitude: 22.671034, longitude: 113.830765, gpsBearing: 348},{latitude: 22.671065, longitude: 113.830838, gpsBearing: 348},{latitude: 22.671175, longitude: 113.830935, gpsBearing: 348},{latitude: 22.671178, longitude: 113.830935, gpsBearing: 348},{latitude: 22.671248, longitude: 113.830893, gpsBearing: 348},{latitude: 22.671134, longitude: 113.83089, gpsBearing: 348},{latitude: 22.671147, longitude: 113.830964, gpsBearing: 348},{latitude: 22.671283, longitude: 113.831064, gpsBearing: 348},{latitude: 22.671341, longitude: 113.831058, gpsBearing: 348}],
       color: "#7b7af8",
       width: 5,
       //borderWidth: 2,
       borderColor: '#7b7af8',
       level: 'abovebuildings',   //压盖关系
       arrowLine: true        //带箭头的线
      }],
      polygons: [],
      mapSettings: {        //统一设置地图配置
       skew: 0,         //倾斜角度
       rotate: 0,        //旋转角度
       showScale: false,     //显示比例尺,工具暂不支持
       subKey: '',        //个性化地图使用的key
       layerStyle: 1,      //个性化地图配置的 style
       enableZoom: true,     //缩放
       enableScroll: true,    //拖动
       enableRotate: false,   //旋转
       showCompass: false,     //指南针
       enable3D: false,      //展示3D楼块(工具暂不支持)
       enableOverlooking: false,  //俯视
       enableSatellite: false,   //卫星图
       enableTraffic: false,    //实时路况
      },
      playIndex: 0,
      showMessage: "",
      step: 1,
      duration: 100,
      maxDuration: 2000,
      minDuration: 500,
      isPause: false
     },
     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({
        markerId: 1,
        autoRotate: true,
        moveWithRotate: true,
        duration: 1000,
        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({
        markerId: 1,
        autoRotate: false,
        moveWithRotate: true,
        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({
       playIndex: 0,
       '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({
        isPause: true
       });
      }
     
     },
     trackerPlay: function () {
      if (this.data.isPause) {
       this.beginTrack();
       this.setData({
        isPause: false
       });
      }
     
     },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
      this.mapCtx = wx.createMapContext('mymap');
      this.trackPlay();
     },
    })
    这里如果每次移动一个点,就切换一下地图中心点,去跟随车辆位置的话,地图会有抖动的感觉。所以我们做了一个可视化区域的判断,当车出了可视化区域的时候再进行地图中心点的切换。

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

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

    展开全文
    buduoduoorg 2021-02-02 16:51:17
  • 这问题的根源就是小程序地图并没有销毁地图的方法,所以我们只能通过去掉地图上的点或者线来实现销毁地图的效果,但是这是有一个前提的,因为我们不能直接通过销毁地图来更新数据,所以我们只能在轨迹回放到一个点...

    map地图轨迹回放报FaceTo的错误

    faceTo的错误
    如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行。
    这问题的根源就是小程序地图并没有销毁地图的方法,所以我们只能通过去掉地图上的点或者线来实现销毁地图的效果,但是这是有一个前提的,因为我们不能直接通过销毁地图来更新数据,所以我们只能在轨迹回放到一个点结束或者是全部回放结束了的时候才能开始更换新的数据,如果在中途就突然的更新掉数据那么就会报上图的错。
    所以解决方法就是做一个判断,在轨迹未到下一个点的时候就让他继续走,直到触发到了下一个点,就可以进行数据的更新了。
    轨迹回放代码

    这边附上我敲的代码,因为我使用的是小程序的translateMarker方法,所以在到每一个点的都会被触发,我就是在成功的success状态上判断是否需要更新数据。
    
    展开全文
    weixin_45219548 2021-08-19 17:43:49
  • 本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放。 最终效果: 实现过程 1. 文件index.wxml代码如下,这一块比较简单,可自行查看,不做过多分析: <!--index.wxml--> <...

    前言

    本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放。

    最终效果:

    实现过程

    1. 文件index.wxml代码如下,这一块比较简单,可自行查看,不做过多分析:

    <!--index.wxml-->
    <view class="container">
      <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" polyline="{{polyline}}" enable-satellite="{{satellite}}" show-location style="width: 100%; height: 100vh;"></map>
    </view>

    2. 文件index.js存放所有功能的逻辑代码,相对比较复杂,下面分开来分析几个重点方法:

    1)方法getDistance用于计算两个坐标点之间的距离,参数为两个坐标点的经纬度;

    2)方法translateMarker使用translateMarker实现marker平移,为了实现多点之间连续平移,在内部嵌套方法translateMarker;

    3)wx.getLocation用来获取当前的坐标点。

    Tips:

    points中的“+-”0.01等,无特别意义,可自己任意修改;实际情况可调用接口获取轨迹数据;

    duration = getDistance * 2中的2,无特别意义,可根据实际情况自行调整。

    // 全屏地图路线图并动画移动
    // polyline中的points可以获取json用来绘制轨迹图
    // 获取应用实例
    const app = getApp()
    
    Page({
      data: {
        markers: [], // 标记点集合
        polyline: [], // 坐标点集合
        satellite: true, // 是否开启卫星图
        i: 0 // 用于循环
      },
      onReady: function() {
        this.mapCtx = wx.createMapContext('map'); // 创建 map 上下文 MapContext 对象
      },
      onLoad: function() {
        let that = this;
    
        // 获取当前坐标
        wx.getLocation({
          type: 'wgs84',
          success: (res) => {
            // 坐标集合
            let points = [{
              longitude: res.longitude,
              latitude: res.latitude
            }, {
              longitude: res.longitude + 0.01,
              latitude: res.latitude + 0.01
            }, {
              longitude: res.longitude - 0.01,
              latitude: res.latitude + 0.02
            }, {
              longitude: res.longitude - 0.01,
              latitude: res.latitude + 0.01
            }, {
              longitude: res.longitude,
              latitude: res.latitude
            }];
            // 标记点集合
            let markers = points;
            markers.map((value, index) => {
              markers[index].id = index + 1;
            });
    
            this.setData({
              polyline: [{
                points: points,
                color: "#FF0000DD",
                width: 2
              }],
              markers: markers,
              latitude: res.latitude,
              longitude: res.longitude
            })
            this.translateMarker(markers);
          }
        })
      },
      // 平移marker,带动画
      translateMarker: function(markers) {
        let that = this;
        let markerId = markers[that.data.i].id;
        let destination = {
          longitude: markers[that.data.i + 1].longitude,
          latitude: markers[that.data.i + 1].latitude
        };
        let getDistance = that.getDistance(markers[that.data.i].latitude, markers[that.data.i].longitude, markers[that.data.i + 1].latitude, markers[that.data.i + 1].longitude);
        let duration = getDistance * 2; // 根据距离计算平移的速度,看起来保持匀速
        this.mapCtx.translateMarker({
          markerId: markerId,
          destination: destination,
          autoRotate: true,
          rotate: 30,
          duration: duration,
          success(res) {
            that.setData({
              i: that.data.i + 1
            });
            // 小于长度减1才执行
            if (that.data.i < markers.length - 1) {
              that.translateMarker(markers);
            }
          },
          fail(err) {
            console.log('fail', err)
          }
        })
      },
      // 计算两坐标点之间的距离
      getDistance: function(lat1, lng1, lat2, lng2) {
        let rad1 = lat1 * Math.PI / 180.0;
        let rad2 = lat2 * Math.PI / 180.0;
        let a = rad1 - rad2;
        let b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
        let r = 6378137;
        return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)
      }
    })

    扫描公众号,了解更多实例分享:

    展开全文
    king0964 2020-04-10 08:17:53
  • weixin_43392489 2021-01-05 13:19:11
  • weixin_30920597 2019-05-15 16:04:00
  • vampire10086 2020-06-28 16:52:10
  • qq_42613224 2020-08-03 09:50:35
  • museions 2019-01-05 13:36:53
  • weixin_39461487 2018-05-08 14:18:09
  • weixin_45219548 2021-08-18 15:25:48
  • hahahhahahahha123456 2019-12-02 10:27:40
  • weixin_44181723 2021-06-01 22:10:45
  • caoli201314 2021-06-10 06:35:53
  • Hello_World_CFF 2021-04-07 12:50:37
  • lzllzllhl 2020-10-30 14:13:53
  • weixin_44181723 2021-06-02 16:19:09
  • weixin_44181723 2021-06-03 12:31:54
  • weixin_44181723 2021-06-01 22:03:34
  • gaolei1201 2017-03-08 20:05:41

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 527
精华内容 210
关键字:

微信小程序轨迹回放

微信小程序 订阅