微信小程序---- 外賣小程序查看地圖路線（騎手端&用戶端）【高德地圖】

前言：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>剩余公里數(shù)：{{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: '', //起始經(jīng)度
    longitude: '', //終點緯度
    zhongdianjingdu: '', //終點經(jīng)度
    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: '', //特殊商戶身份 單個小車位置的經(jīng)緯度
    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('高德劃線數(shù)據(jù)-----', 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) { //公里數(shù)
          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) {

      }
    })
  },

  //這個函數(shù)是一開始點擊事件觸發(fā)的：
  async authorization() {
    let that = this;
    try { //等待
      await this.getWxLocation() //小車身份
    } catch (error) {
      wx.showModal({
        title: '溫馨提示',
        tip: '獲取權限失敗，是否授權獲取地理位置？',
        showCancel: true,
        confirmText: '授權位置',
        cancelText: '取消',
        sureCall() {
          that.openSetting()
        },
        cancelCall() {}
      })
      return
    }
  },

  // 獲取當前位置 (小車身份調(diào)用)
  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; //將經(jīng)緯度拼接
        let destination = v.zhongdianweidu + ',' + v.zhongdianjingdu;
        console.log('當前經(jīng)緯度---', 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); //路況劃線
        //小車增加當前位置經(jīng)緯度 latitude緯度
        updata(sonlinecopyId, latitude, longitude).then(res => {
          console.log('小車增加當前位置經(jīng)緯度----', 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表示用戶已同意獲得定位信息，此時調(diào)用getlocation可以拿到信息
          self.authorization()
        }
      }
    })
  },


  // 特殊商戶身份 獲取小車經(jīng)緯度
  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('特殊商戶身份 獲取小車經(jīng)緯度--', origin)
          this.getDrivingRoute(origin, destination); //路況劃線
          wx.hideLoading();
        }else{
          wx.hideLoading();
          wx.showToast({
            title: '網(wǎng)絡繁忙，請稍后再試！',
            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);
  },

})

文章來源地址http://www.zghlxwxcb.cn/news/detail-597161.html

到了這里，關于微信小程序---- 外賣小程序查看實時地圖路線（騎手端&用戶端）【高德地圖】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！