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

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

前言：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 = thiswx.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);},})

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

基于微信点餐外卖小程序系统设计与实现开题报告
毕业论文基于微信小程序外卖点菜系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 Xxx ...
基于微信点餐外卖小程序设计与实现开题报告
大学生毕业论文基于JAVA后台微信小程序外卖点餐系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: XXXX大学生毕业论文(设计)开题报告书姓名 ...
android开发之高德地图API篇：1、高德地图API之实时定位+轨迹可视化
TIME:2020年7月6日高德地图API之实时定位+轨迹可视化前言: step1.工程的配置 step2.显示地图 step2.实现静态定位: step3.实时定位 step4.实现轨迹可视化: ...
高德足迹地图在哪里,高德地图怎么点亮城市？高德地图足迹地图查看方法
核心提示:高德地图新推出的足迹地图功能可是相当受欢迎,让你可以在移动端浏览自己曾驻足过的城市高德地图新推出的足迹地图功能可是相当受欢迎,让你可以在移动端浏览自己曾驻足过的城市,看这一路走来经过的风景 ...
小程序毕业设计基于微信点餐外卖小程序毕业设计开题报告功能参考
效果图
废品回收小程序独立开发版V1.8.0含区域代理端回收员端用户端加盟入驻版本小程序源码
本小程序全新独立开发Thinkphp为核心演示请联系客服获取搭建服务器要求:云服务器和已备案的域名运行环境: PHP5.6+MySQL5.7+小程序+域名SSL 功能: 1.多级别权限:超管可招 ...
高德地图安卓拖拽选点_不止微信支付宝高德地图正式上线小程序入口
此前,即速应用发布的<小程序2019年行业年中增长研究报告>指出,小程序发展周期主要分为四个阶段:探索期.启动期.高速发展期和成熟期,目前处于高速发展后期,逐渐平稳发展. 2017年小程序 ...
uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）
uniapp 微信小程序实现选择地图位置功能最近在做商家小程序,就是用于给实体店老板进行网上开店的小程序. 其中有一项功能就是获取商店的位置,要求支持:获取当前定位/检索到指定位置/地图选点等功能, ...
编程小石头点餐小程序_小程序点餐成为餐饮业行业趋势
随着微信小应用程序的不断改进,正朝着适应完全市场发展,并且逐渐实现到这一点.扫码点餐结账一条龙的小程序,这有助于餐饮业成为大趋势. "排队一个小时,吃饭十来分钟."现在,排队等候晚 ...

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

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

html

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

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

最新文章

热门文章