微信小程序startLocationUpdateBackground()简单实现骑手配送位置

注意：以下效果仅在真机中生效

骑手中心点会跟随当前的位置变化而变化 

<view class="map_box">
  <map id='myMap' scale="15" max-scale="15" min-scale="3" latitude="{
   {markers[0].latitude}}" longitude="{
   {markers[0].longitude}}" markers="{
   {markers}}">
  </map>
</view>

<view class="weizhixuan_box flex column">
  <view class="itme flex acenter" catchtap="weizhiXinxi" data-idx="0">选择起点：{
   {markers[0].longitude}};{
   {markers[0].latitude}}</view>
  <view class="itme flex acenter" catchtap="weizhiXinxi" data-idx="1">选择终点：{
   {markers[1].longitude}};{
   {markers[1].latitude}}</view>
  <view class="annui flex center" catchtap="GOkaishi">开始配送</view>
</view>

距离：{
   {julikm}}KM

var util = require("../utils/util.js");
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    timer: '',
    markers: [],
    julikm: 0,
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    var that = this;

    wx.startLocationUpdateBackground({
      success(res) {
        console.log('开启后台定位', res);
      },
      fail(res) {
        console.log('开启后台定位失败', res);
        //授权失败后引导用户打开定位信息
        wx.getSetting({
          success: function (res) {
            var statu = res.authSetting;
            console.log(statu)
            if (!statu["scope.userLocationBackground"]) {
              wx.showModal({
                title: "是否授权使用期间和离开后！",
                content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                success: function (tip) {
                  if (tip.confirm) {
                    wx.openSetting({
                      success: function (data) {
                        if (data.authSetting["scope.userLocationBackground"] === true) {

                        }
                      }
                    });
                  } else {
                    //console.log('用户拒绝打开设置界面')
                  }
                }
              });
            }
          }
        });

      }
    });

  },

  //监听地理位置变化
  mapWeizhi: function () {
    var that = this;
    const _locationChangeFn = function (res) {
      var markers = that.data.markers;
      markers[0].latitude = res.latitude;
      markers[0].longitude = res.longitude;
      that.setData({
        markers,
      })
      that.GetDistance();
      wx.offLocationChange(_locationChangeFn)
      that.mapWeizhi2()
    }
    wx.onLocationChange(_locationChangeFn)
  },


  //监听地理位置变化
  mapWeizhi2: function () {
    var that = this;
    //定时执行每隔40秒获取当前位置（配送员）一次
    that.timer = setInterval(function () { //这里把setInterval赋值给变量名为timer的变量
      const _locationChangeFn = function (res) {
        var markers = that.data.markers;
        markers[0].latitude = res.latitude;
        markers[0].longitude = res.longitude;
        that.setData({
          markers,
        })
        that.GetDistance();
        wx.offLocationChange(_locationChangeFn)
      }
      wx.onLocationChange(_locationChangeFn)
    }, 5000)
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    var that = this;
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    var that = this;
  },
  //util统一跳转
  onUrls: function (event) {
    util.onUrls(event);
  },
  // 拉起地图选点
  weizhiXinxi: function (e) {
    var that = this;
    var idx = e.currentTarget.dataset.idx;
    var markers = that.data.markers;
    wx.chooseLocation({ //这个是拉起搜索
      latitude: that.data.tempMapIpInfo.latitude,
      longitude: that.data.tempMapIpInfo.longitude,
      success(res) {
        // console.log(res)
        markers[idx] = {};
        markers[idx].height = 25;
        markers[idx].width = 25;
        markers[idx].iconPath = idx > 0 ? '/pages/images/ces/wode.png' : '/pages/images/ces/qishou.png';
        markers[idx].id = idx;
        markers[idx].longitude = res.longitude;
        markers[idx].latitude = res.latitude;
        markers[idx].title = idx ? '终点' : '起点';
        that.setData({
          markers,
        })
      },
    })
  },

  //开始配送
  GOkaishi: function (e) {
    var that = this;
    that.mapWeizhi();
  },

  //计算两点之家的距离
  GetDistance: function (e) {
    var that = this;
    var markers = that.data.markers;
    that.setData({
      julikm: util.GetDistance(markers[0].latitude, markers[0].longitude, markers[1].latitude, markers[1].longitude),
    })
  }
})

.map_box {
  width: 100%;
  height: 600rpx;
}

.map_box #myMap {
  width: 100%;
  height: 100%;
}

.weizhixuan_box {
  margin: 20rpx;
}

.weizhixuan_box .itme {
  height: 80rpx;
}

.weizhixuan_box .annui {
  background-color: #f00;
  color: #fff;
  height: 100rpx;
  margin-top: 20rpx;
}

JS计算两点之间的距离参考文章：https://blog.csdn.net/qq_31156277/article/details/81712226