微信小程序实现活动轨迹回放

短命女 2023-07-24 05:34 13阅读 0赞

### 前言 ###

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

最终效果：

![2020040916333286.gif][]

### 实现过程 ###

1. 文件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)
      }
    })

扫描公众号，了解更多实例分享：

![20200409163717384.jpg][]

[MapContext]: https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.html
[2020040916333286.gif]: /images/20230528/1b595d1862f14a9da2ee421de48f1235.png
[20200409163717384.jpg]: /images/20230528/d455c0da23a34965ac7bb2af896aec59.png