【黄啊码】微信小程序外卖项目显示骑手位置

<view class="map-container">
   <map class="gaode-map" id="map" markers="{{markers}}" longitude="{{longitude}}" polyline="{{polyline}}" latitude="{{latitude}}" scale="14"></map>
</view>

 page,html,body {
   width:100%;
   height:100%;
 }
 .map-container {
   width:100%;
   height:100%;
 }
 
 .gaode-map {
   width:100%;
   height:100%;
 }

const gaodeMap = require('../../amap-wx.js'); // 引入高德sdk
 const map = new gaodeMap.AMapWX({
   key: 'xxxxxxxx' // 高德申请的key
 });
 Page({
   data: {
     longitude: 116.397128, // 给个默认的经纬度 定位到北京天安门
     latitude: 39.916527, //
     distance: 0, // 骑手距离
     cost: 0, // 大概时间
     polyline: [], // 存放路线的经纬度
     markers: [{ // 自己设置的三个mark标记，分别是 商家，用户，骑手
       iconPath: "/images/shangjia.png",
       id: 0,
       latitude: 39.916527,
       longitude: 116.397128,
       width: 20,
       height: 23
     }, {
       iconPath: "/images/weizhi.png",
       id: 1,
       latitude: 31.23035,
       longitude: 121.473717,
       width: 20,
       height: 23
     }, {
       iconPath: "/images/qishou.png",
       id: 2,
       latitude: 31.23035,
       longitude: 121.473717,
       width: 20,
       height: 23
     }],
   },
 
   // 获取用户位置信息
   getUserLocation() {
     let that = this
     wx.getLocation({
       success: (res) => {
         that.setData({
           longitude: res.longitude,
           latitude: res.latitude,
           ['markers[0].latitude']: res.latitude,
           ['markers[0].longitude']: res.longitude
         }, () => {
           map.getRidingRoute({
             origin: '121.473717,31.23035', // 路线规划的起点 随便在我附近搜的位置转的经纬度
             destination: `${res.longitude},${res.latitude}`, // 目的地经纬度
             success: (data) => {
               let points = [];
               let distance = 0
               let cost = 0
               if (data.paths && data.paths[0] && data.paths[0].steps) {
                var steps = data.paths[0].steps;
                 for (var i = 0; i < steps.length; i++) {
                   var poLen = steps[i].polyline.split(';');
                   for (var j = 0; j < poLen.length; j++) {
                     points.push({
                       longitude: parseFloat(poLen[j].split(',')[0]),
                       latitude: parseFloat(poLen[j].split(',')[1])
                     })
                   }
                 }
               }
 
               if (data.paths[0] && data.paths[0].distance) {
                 distance = data.paths[0].distance + '米'
               }
               if (data.paths[0] && data.paths[0].duration) {
                 cost = parseInt(data.paths[0].duration / 60) + '分钟'
               }
 
               that.setData({
                 polyline: [{
                   points: points,
                   color: "#0091ff",
                   width: 6
                 }],
                 distance,
                 cost,
                 ['markers[2].longitude']: points[120].longitude,
                 ['markers[2].latitude']: points[120].latitude
               })
               
               let tempNum = 0
               // 设置一个定时器根据路线规划上的经纬度每100毫秒前进一步
              let timer = setInterval(()=>{
                 if(tempNum >= points.length){
                   // 跑完了规划路线就停止
                   clearInterval(this.data.timer)
                 }
                 if(!this.data.timer){
                   // 将定时器设置为全局的，方便退出组件时销毁
                   this.setData({
                     timer:timer
                   })
                 }
                 // 
                 this.setData({
                   ['markers[2].longitude']: points[++tempNum].longitude,
                   ['markers[2].latitude']: points[++tempNum].latitude
                 })
               },100)
             }
           })
         })
       },
     })
   },
 
   // 用户授权
   userAuth() {
     wx.getSetting({
       success: (res) => {
         if (!res.authSetting['scope.userLocation']) {
           wx.authorize({
             scope: 'scope.userLocation',
             success: () => {
               // 同意授权位置
               this.getUserLocation()
             },
             fail: () => {
               wx.showModal({
                 content: '拒绝授权将无法获取您的位置，请授权。',
                 showCancel: false,
                 success: (r) => {
                   if (r.confirm) {
                     // 打开设置页面让用户手动开启权限
                     wx.openSetting({
                       success:(v)=>{
 
                       }
                     })
                   }
                 }
               })
             }
           })
         }
       },
     })
   },
 
   onLoad: function () {
   },
 
   onShow:function(){
     this.userAuth()
   },
 
   onUnload:function(){
     clearInterval(this.data.timer)
   }
 
 })