微信小程序---- 外卖小程序查看地图路线（骑手端&用户端）【高德地图】
前言：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);
},
})
