微信小程序---- 外卖小程序查看实时地图路线（骑手端&用户端）【高德地图】

微信小程序---- 外卖小程序查看地图路线（骑手端&用户端）【高德地图】

前言：1. 在小程序中需要使用map组件，文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/map.html
2.使用的是高德地图，所以需要引进相关的js，下载链接：https://lbs.amap.com/api/wx/download
3.去往高德官方申请需要用的key,操作链接：https://lbs.amap.com/api/wx/guide/create-project/get-key/

html

<map id="map" style="width: 100%;height: 100vh;" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" polyline="{{polyline}}" show-location enable-zoom>
      <cover-view id="top">
        <cover-view class="ibody">
          <cover-view class="leftz">
            <cover-view>预计时长：{{duration}}分钟</cover-view>
          </cover-view>
          <cover-view class="leftz leftz1">           
            <cover-view>剩余公里数：{{distance}}米</cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
  </map>

JS （ tag 1是司机端进入查看 2是用户端身份查看）

import {
  showdriverupdata,
  getdata,
  updata
} from '../server/post';
var amapFile = require('../../common/amap-wx.130.js'); //引入高德js
Page({
  data: {
    tag: 1, //1是小车身份进入查看 2是特殊商户身份查看
    latitude: '', //起始经度
    longitude: '', //终点纬度
    zhongdianjingdu: '', //终点经度
    zhongdianweidu: '', //终点纬度
    scale: 12,
    markers: [{
      iconPath: "../../image/car.png",
      id: 0,
      latitude: '',
      longitude: '',
      width: 33,
      height: 30
    }, {
      iconPath: "../../image/end.png",
      id: 1,
      latitude: '',
      longitude: '',
      width: 35,
      height: 40
    }],
    distance: '',
    polyline: [],
    scatterlongitude: '', //特殊商户身份 单个小车位置的经纬度
    timer: null,
  },
  onLoad: function (options) {
    this.setData({
      tag: options.tag || 1,
      scatterlongitude: options.scatterlongitude,
      timer:null
    })
    clearInterval(this.data.timer);
  },
  onShow() {
    this.getCarinfo();
  },

  // 高德地图划线
  getDrivingRoute(origin, destination) {
    var that = this;
    var myAmapFun = new amapFile.AMapWX({
      key: 'XXXXXXXXXX'
    });
    myAmapFun.getDrivingRoute({
      origin: origin,
      destination: destination,
      success: function (data) {
        console.log('高德划线数据-----', data)
        var points = [];
        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])
              })
            }
          }
        }
        that.setData({
          polyline: [{
            points: points,
            color: "#0091ff",
            width: 6
          }]
        });
        if (data.paths[0] && data.paths[0].distance) { //公里数
          that.setData({
            distance: data.paths[0].distance
          });
        }
        if (data.paths[0] && data.paths[0].duration) { //花费时间
          let miu = parseInt(Number(data.paths[0].duration) / 60)
          that.setData({
            duration: miu
          });
        }
      },
      fail: function (info) {

      }
    })
  },

  //这个函数是一开始点击事件触发的：
  async authorization() {
    let that = this;
    try { //等待
      await this.getWxLocation() //小车身份
    } catch (error) {
      wx.showModal({
        title: '温馨提示',
        tip: '获取权限失败，是否授权获取地理位置？',
        showCancel: true,
        confirmText: '授权位置',
        cancelText: '取消',
        sureCall() {
          that.openSetting()
        },
        cancelCall() {}
      })
      return
    }
  },

  // 获取当前位置 (小车身份调用)
  getWxLocation() {
    let that = this,
      v = that.data;
    wx.showLoading({
      title: '定位中...',
      mask: true,
    })
    return new Promise((resolve, reject) => {
      let _locationChangeFn = (res) => {
        console.log('location change', res)
        let sonlinecopyId = wx.getStorageSync('lineId');
        const latitude = res.latitude;
        const longitude = res.longitude;
        let origin = longitude + ',' + latitude; //将经纬度拼接
        let destination = v.zhongdianweidu + ',' + v.zhongdianjingdu;
        console.log('当前经纬度---', origin)
        that.setData({
          latitude,
          longitude,
          ['markers[0].latitude']: latitude,
          ['markers[0].longitude']: longitude,
          ['markers[1].latitude']: v.zhongdianjingdu,
          ['markers[1].longitude']: v.zhongdianweidu,
        })

        that.getDrivingRoute(origin, destination); //路况划线
        //小车增加当前位置经纬度 latitude纬度
        updata(sonlinecopyId, latitude, longitude).then(res => {
          console.log('小车增加当前位置经纬度----', latitude, longitude)
          wx.hideLoading();
        })
        // wx.offLocationChange(_locationChangeFn)
      }
      wx.startLocationUpdate({
        success: (res) => {
          wx.onLocationChange(_locationChangeFn)
          resolve()
        },
        fail: (err) => {
          console.log('获取当前位置失败', err)
          wx.hideLoading()
          reject()
        }
      })
    })
  },

  // 开启权限
  openSetting() {
    let self = this
    wx.openSetting({
      success(res) {
        console.log(res)
        if (res.authSetting["scope.userLocation"]) {
          // res.authSetting["scope.userLocation"]为trueb表示用户已同意获得定位信息，此时调用getlocation可以拿到信息
          self.authorization()
        }
      }
    })
  },


  // 特殊商户身份 获取小车经纬度
  getsmallCar() {
    wx.showLoading({
      title: '获取中...',
      mask: true,
    })
    let copyId = wx.getStorageSync('lineId');
    let v = this.data;
    v.timer = setInterval(() => {
      getdata(copyId).then(res => {
        if (res.data.code != 500) {
          let datas = res.data.data;
          let latitude = '',
            longitude = "";

          if (datas.msg == "未获取到司机实时位置!") {
            let arr = [];
            arr = v.scatterlongitude.split(',');
            latitude = arr[1];
            longitude = arr[0];
          } else {
            datas.weidu > 90 ? (latitude = datas.jingdu, longitude = datas.weidu) :
              (latitude = datas.weidu, longitude = datas.jingdu);
          }
          this.setData({
            latitude,
            longitude,
            ['markers[0].latitude']: latitude,
            ['markers[0].longitude']: longitude,
            ['markers[1].latitude']: v.zhongdianjingdu,
            ['markers[1].longitude']: v.zhongdianweidu,
          })

          let origin = longitude + ',' + latitude;
          let destination = v.zhongdianweidu + ',' + v.zhongdianjingdu;
          console.log('特殊商户身份 获取小车经纬度--', origin)
          this.getDrivingRoute(origin, destination); //路况划线
          wx.hideLoading();
        }else{
          wx.hideLoading();
          wx.showToast({
            title: '网络繁忙，请稍后再试！',
            icon:'none'
          })
        }
      })
    }, 5000);
  },

  // 获取小车信息
  getCarinfo() {
    let that = this;
    let sonlinecopyId = wx.getStorageSync('lineId');
    showdriverupdata(sonlinecopyId).then(res => {

      let datas = res.data.data;
      this.setData({
        carnub: datas.chepaihao,
        driverName: datas.driverName,
        begintime: datas.kaishi,
        peisonging: datas.peisongzhong,
        peisonglist: datas.daipeisong,
        zhongdianjingdu: datas.zhongdianjingdu,
        zhongdianweidu: datas.zhongdianweidu
      })
      // this.getLocation();

      console.log('小车信息----', datas);
      // that.authorization(); //小车身份地图
      if (that.data.tag == 1) {
        that.authorization(); //小车身份地图
      } else {
        that.getsmallCar() //特殊商户身份
      }

    })
  },

  onUnload() {
    clearInterval(this.data.timer);
  },
  onHide: function () {
    clearInterval(this.data.timer);
  },

})

文章来源地址https://www.toymoban.com/news/detail-597161.html

到了这里，关于微信小程序---- 外卖小程序查看实时地图路线（骑手端&用户端）【高德地图】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！