微信小程序绘制线路以及marker轨迹移动

目录

效果图：

一、布局文件

二、js文件

三、代码说明

---

效果图：

一、布局文件

<map class="mapUI" id="myMap" markers="{{markers}}" latitude="{{latitude}}" longitude="{{longitude}}" polyline="{{polyline}}" include-points='{{points}}' scale="16"></map>

二、js文件

export { }
const appData = getApp();
var pointinfor = []
var thatInfor

Page({

  data: {
    gps: ["108.939087,34.250638", "108.939087,34.240917", "108.932135,34.241095", "108.932006,34.235702", "108.932049,34.230291", "108.931985,34.228233", "108.931942,34.222778", "108.931942,34.218058", "108.939151,34.218236", "108.939055,34.214536", "108.943153,34.214536", "108.946587,34.214478"],
    searchData: [],
    lineData: [],
    polyline: [],
    markers: [],
    points: [],
    orgId: "",
    token: "",
    codeModel: {},
    choicePersonInfor: {},
    companyData: [],

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    this.mapCtx = wx.createMapContext('myMap')
    this.mapCtx.moveToLocation()
    var pointinfor = [];
    for (var index = 0; index < this.data.gps.length; index++) {
      pointinfor.push({
        latitude: this.data.gps[index].split(",")[1],
        longitude: this.data.gps[index].split(",")[0],
      })
    }

    let mapAddress = [];
    mapAddress.push({
      latitude: this.data.gps[0].split(",")[1],
      longitude: this.data.gps[0].split(",")[0],
      id: 20,
      iconPath: '../image/mocar.png',
      width: '40px',
      height: '60px',
      anchor: {
        x: 0.5,
        y: 0.4
      }
    });
    mapAddress.push({
      id: 1001,
      latitude: this.data.gps[0].split(",")[1],
      longitude: this.data.gps[0].split(",")[0],
      name: "起点",
      iconPath: '../image/icon_start.png',
      content: "111",
      width: '30px',
      height: '45px',
    });

    mapAddress.push({
      id: 9001,
      latitude: this.data.gps[this.data.gps.length - 1].split(",")[1],
      longitude: this.data.gps[this.data.gps.length - 1].split(",")[0],
      name: "终点",
      iconPath: '../image/icon_end.png',
      content: "111",
      width: '30px',
      height: '45px',
    });


    mapAddress.push({
      id: 1011,
      latitude: this.data.gps[3].split(",")[1],
      longitude: this.data.gps[3].split(",")[0],
      name: "幸福小区接送点",
      iconPath: '/pages/image/markerimage.png',
      width: '34px',
      height: '34px',
      content: "111",
      callout: {
        content: "幸福小区接送点",
        padding: 5,
        fontSize: 12,
        textAlign: 'center',
        display: 'ALWAYS',
        borderRadius: 5,
        borderWidth: 1,
        bgColor: '#ffffff',
        borderColor: "#c3c3c3"
      },

    });

    mapAddress.push({
      id: 1012,
      latitude: this.data.gps[6].split(",")[1],
      longitude: this.data.gps[6].split(",")[0],
      name: "幸福小区接送点",
      iconPath: '/pages/image/markerimage.png',
      width: '34px',
      height: '34px',
      content: "111",
      callout: {
        content: "雁塔小区接送点",
        padding: 5,
        fontSize: 12,
        textAlign: 'center',
        display: 'ALWAYS',
        borderRadius: 5,
        borderWidth: 1,
        bgColor: '#ffffff',
        borderColor: "#c3c3c3"
      },
    });

    this.setData({
      markers: mapAddress,
      polyline: [{
        points: pointinfor,
        color: '#09B988',
        width: 5,
        dottedLine: false,
        arrowLine: true,
        borderColor: "#09B988",
        borderWidth: 1,
      }],
    })

    var mapCtx = wx.createMapContext("myMap");

    mapCtx.includePoints({
      points: pointinfor,
      padding: [50]
    })

    mapCtx.moveAlong({
      markerId: 20,
      autoRotate: true,
      path: pointinfor,
      duration: 50000,
    })
  }, 
})

三、代码说明

1：首先需要给绘制的线路设置坐标数据信息

2：对起点和终点设置两个marker

3：设置小车轨迹的移动

 mapCtx.moveAlong({
      markerId: 20,
      autoRotate: true,
      path: pointinfor,
      duration: 50000,
    })

4：设置线路与地图边距的距离代码

   mapCtx.includePoints({
      points: pointinfor,
      padding: [50]
    })