微信小程序地图导航集成（PHP）

客户界面

<view class="page-body"><view class="page-section page-section-gap"><mapid="myMap"style="width: 100%;height:{{winH}}px;display: {{map==true?'block':'none'}}" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}" polyline="{{polyline}}" circles='{{circles}}'enable-overlooking='{{true}}' enable-rotate="{{true}}" show-location="{{true}}" show-compass="{{true}}" scale="{{scale}}"></map></view><cover-view class='controls'><cover-image src='../../images/xicheuser.png' bindtap="openUser" class='icon'></cover-image><cover-image src='../../images/qs_car.png' bindtap="openQS" class='icon'></cover-image><cover-image src='../../images/qrcode.png' bindtap="qrcode" class='icon'></cover-image><cover-image src='../../images/luxian.png' bindtap="mapLin" class='icon'></cover-image><cover-image src='../../images/quanpin.png' bindtap="getAllMap" class="icon"></cover-image><cover-image src='../../images/dibiao.png' bindtap="getTo" class="icon"></cover-image><cover-image src='../../images/dingwei.png' bindtap="moveToLocation" class="icon"></cover-image></cover-view><cover-view class='tabar'><cover-view class='tabar-item' bindtap='tbr'>菜单</cover-view><cover-view class='tabar-item' wx:if="{{distance}}">路程：{{distance}} 米</cover-view><cover-view class='tabar-item' wx:if="{{duration}}">时长：{{duration}} 分</cover-view></cover-view><cover-view class='map_sever_btn' style='left:{{btnLeftX}}px' bindtap='_severe_btn_'><cover-image class='map_sever_btn_img' src='../../images/xiche_btn.png'></cover-image></cover-view><!-- <cover-view class='sf'><cover-view data-sf='d' bindtap='sf' class='sf_d sf_btn'>+</cover-view><cover-view data-sf='x' bindtap='sf' class='sf_x sf_btn'>-</cover-view></cover-view> --><view class="modal-dialog" wx:if="{{showModal}}"><view class="modal-title">提示</view><view class='qrcode_canvas'><!-- <canvas class='canvas' canvas-id='canvas'></canvas> --></view><view class="modal-content"><view class='modal-canvas'><canvas class='canvas' canvas-id='canvas'></canvas></view><view>此二维码是用于汽车服务时，我司工作人员扫码确定</view><view>完成订单时使用，为保证服务的绿色和安全，请不要</view><view>透漏此二维码。</view></view><view class="modal-footer"><view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</view><view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view></view></view>
</view>

var QQMapWX = require('../../utils/lbs/qqmap-wx-jssdk.js');
var config = require("../../utils/config.js");
var api = require('../../utils/api.js');
var QRCode = require('../../utils/weapp-qrcode.js');
var Code = require('../../utils/code.js');
var app=getApp();
var Config = config.Api;
var tbr=false;
var mapCtx;
var qqmapsdk;
var From,F_jd,F_wd,F_name;
var To,T_jd,T_wd,T_name;
var win_h,win_w;
var qrcode=null;
var intervalCode=null;
var fmmt = [null, null, null, null]
var positionType, position, linPatnPositionTime;
var radius;
Page({/*** 页面的初始数据*/data: {canIUse: false,load_btn: false,overlooking:true,map:true,scale: 16,// covers: [{//   latitude: 23.386000000000012,//   longitude: 104.23900000000003,//   iconPath: '/images/location.png'// }]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;wx.getSetting({success: function (res) {console.log(res)if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称// 实例化API核心类loadData(that);} else {that.setData({ canIUse: true,map:false })}}})},login: function () {var that = this;console.log('准备加载用户信息')console.log('判断用户信息')wx.getSetting({success: function (res) {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称if (app.globalData.userInfo) {console.log('存在用户信息')typeof cb == "function" && cb(this.globalData.userInfo)} else {console.log('不存在用户信息')console.log('微信用户信息加载')wx.login({success: function (res) {console.log('Login code获取')if (res.code) {console.log('Login code获取成功')console.log('加载微信用户信息')wx.getUserInfo({success: function (data) {that.setData({ canIUse: false,map:true })console.log('加载微信用户信息成功')console.log(data)//that.globalData.userInfo = data.userInfotypeof cb == "function" && cb(app.globalData.userInfo)var params = {code: res.code,nickName: data.userInfo.nickName,avatarUrl: data.userInfo.avatarUrl,gender: data.userInfo.gender};console.log('加载商城用户信息')api.wxLogin(params).then(function (r) {console.log(r)if (r.Status == 1) {console.log('加载商城用户信息成功并登录')console.log('保存商城用户信息')//登陆成功var userInfo = data.userInfo;userInfo["fail"] = 0;app.globalData.userInfo = userInfo;wx.setStorageSync('MemberID', r.Data.MemberID);wx.setStorageSync('MemberName', r.Data.MemberName);wx.setStorageSync('Token', r.Data.Token);wx.setStorageSync('MemberGender', r.Data.MemberGender);wx.setStorageSync('MemberMobile', r.Data.MemberMobile);wx.setStorageSync('MemberTelephone', r.Data.MemberTelephone);wx.setStorageSync('MemberEmail', r.Data.MemberEmail);wx.setStorageSync('MemberQQ', r.Data.MemberQQ);app.globalData.userInfo = data.userInfo;loadData(that);} else {//登陆失败console.log('加载商城用户信息失败')var userInfo = {nickName: '登录失败',avatarUrl: '../../images/login_fail.png',fail: -1}app.globalData.userInfo = userInfowx.showToast({title: '登录失败',icon: 'success',duration: 2000})}});}});} else {  //获取code失败console.log('Login code获取失败')console.log('获取用户登录态失败！' + res.errMsg)}}});}} else {that.setData({ load_btn: true })}}})},sf:function(e){var that=this;console.log(e.currentTarget.dataset.sf)if (e.currentTarget.dataset.sf=="d"){mapCtx.getScale({success: function (t) {e = t.scale;if (e <= 18) {that.setData({ scale: e });e = e + 1;} else {wx.showToast({title: '缩放太大了',icon: 'success',duration: 2000})}}}); }else{mapCtx.getScale({success: function (t) {e = t.scale;console.log(e)if (e >= 5) {that.setData({ scale: e });e = e - 1;} else {wx.showToast({title: '缩放太小了',icon: 'success',duration: 2000})}}}); }},
// 跳转到目的地getTo:function(e){var that = this;mapCtx.getCenterLocation({success: function (res) {//console.log(res)that.setData({covers:  {latitude: T_wd,longitude: T_jd,iconPath: '/images/location.png'}})},fail: function (err) {}})},
// 显示所有经纬getAllMap:function(){var that=this;mapCtx.includePoints({points: [{latitude: F_wd,longitude: F_jd}, {latitude: T_wd,longitude: T_jd}],padding:[50,50,50,50],});},bindregionchange:function(e){console.log(e)},bindcallouttap:function(e){console.log(e)},bindmarkertap: function (e) {console.log(e)},// 打开用户取送信息框openQS: function (e) {var that = this;clearInterval(linPatnPositionTime);api.getUserQRCode({uid: wx.getStorageSync("MemberID"),phone: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile")}).then(function (e) {//console.log(e.data)if (e.data.length < 1) {wx.showModal({title: '提示',content: '您未创建服务，请点击下方圆形“汽车”图样，选择“我要洗车/我要取车”，我们的工作人员将会在一个30分钟内为您服务。',showCancel: false,confirmText: '关闭'})} else {var userList = e.data;var userPositionListArray = [];var userCarIdListArray = [];for (var i = 0; i < userList.length; i++) {//console.log(userList[i]);userPositionListArray[i] = userList[i].pid;userCarIdListArray[i] = userList[i].carId;}wx.showActionSheet({itemList: userCarIdListArray,success: function (res) {position = userPositionListArray[res.tapIndex];var positionTypeArray=["qu","song"]wx.showActionSheet({itemList: ["鸿瑞取车","鸿瑞送车"],success: function (ress) {positionType=positionTypeArray[ress.tapIndex];linPatnPosition(that)//console.log(ress.tapIndex+"---------------->"+position+"---------->"+positionType)linPatnPositionTime = setInterval(function () { linPatnPosition(that)},10000);}})}})}})},
// 打开用户二维码qrcode:function(e){var that=this;api.getUserQRCode({uid:wx.getStorageSync("MemberID"),phone: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile")}).then(function(e){//console.log(e.data)if (e.data.length<1){wx.showModal({title: '提示',content: '您未创建服务，请点击下方圆形“汽车”图样，选择“我要洗车/我要取车”，我们的工作人员将会在一个30分钟内为您服务。',showCancel: false,confirmText: '关闭'})}else{var userList = e.data;var userPositionListArray = [];var userCarIdListArray = [];for (var i = 0; i < userList.length; i++) {//console.log(userList[i]);userPositionListArray[i] = userList[i].pid;userCarIdListArray[i] = userList[i].carId;}wx.showActionSheet({itemList: userCarIdListArray,success: function (res) {that.showDialogBtn();qrcode = new QRCode('canvas', {text: new Date().getTime().toString() + Code.encrypt(userPositionListArray[res.tapIndex]),width: 150,height: 150,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});var w = null, s = null, q = null, x = null;intervalCode = setInterval(function () {api.getPeisongData({positionid: userPositionListArray[res.tapIndex],msg: "iid"}).then(function (e) {if (iscf(w, e[0].iid)) {showIID(that, e[0].adminId, e[0].pid, e[0].tid,"结单提示");} else {if (iscf(q, e[0].quCheIID)){showIID(that, e[0].adminId, e[0].pid, e[0].tid,"取车提示");}else{if (iscf(s, e[0].songCheIID)){showIID(that, e[0].adminId, e[0].pid, e[0].tid,"送车提示");}else{w = e[0].iid;q = e[0].quCheIID;s = e[0].songCheIID;var cv = Code.encrypt(userPositionListArray[res.tapIndex]);cv = new Date().getTime().toString() + cv;qrcode.makeCode(cv);var time = cv.substring(0, 8);var code = cv.substring(13);}}}})}, 5000);}})}})},
// 进入用户汽车主页openUser:function(e){wx.navigateTo({url: '../xicheuser/xicheuser',})},/*** 弹窗*/showDialogBtn: function () {this.setData({showModal: true,map:false})},hideModal: function () {clearInterval(intervalCode)this.setData({showModal: false,map: true});},onCancel: function () {this.hideModal();},onConfirm: function () {this.hideModal();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function (e) {var that = this;wx.getSystemInfo({success: function (res) {win_h=res.screenHeight;win_w=res.screenWidth;that.setData({ winH: (res.windowHeight) ,btnLeftX: ((res.windowWidth / 2)-30)})},});wx.getLocation({type: 'gcj02',success(res) {F_wd = res.latitude;F_jd = res.longitude;From = F_wd + "," + F_jd;}})},
// 下角中间大按钮事件（完成用户与客户的信息）_severe_btn_:function(){var that=this;var item;var able = wx.getStorageSync('MemberGroupID');if (able == "3" || able == 3) {item =["取车", "送车"];}else{item = ["我要洗车", "我要取车"];}wx.showActionSheet({itemList: item,success:function(res){switch(res.tapIndex){case 0:if (item[0] =="取车"){wx.navigateTo({url: '../songche/songche?type=quche',});}else{wx.navigateTo({url: '../xicheFrom/xicheFrom',});}break;case 1:if (item[1] == "送车") {wx.navigateTo({url: '../songche/songche?type=songche',});} else {wx.showModal({title: '取车提示',content: '下一步将直接拨打电话，您确定要临时取车吗？',showCancel: true,cancelText: '取消',confirmText: '拨打',success: function(res) {if(res.confirm){wx.makePhoneCall({phoneNumber: wx.getStorageSync("Mobile") //仅为示例，并非真实的电话号码})}},})} break;}}})},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;that.onLoad();that.onReady();},/*** 生命周期函数--监听页面隐藏*/onHide: function () {clearInterval(linPatnPositionTime)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},getCenterLocation: function () {mapCtx.getCenterLocation({success: function (res) {//console.log(res.longitude)//console.log(res.latitude)}})},// 移动到当前（定位）位置moveToLocation: function () {mapCtx.moveToLocation();},translateMarker: function () {mapCtx.translateMarker({markerId: 1,autoRotate: true,duration: 1000,destination: {latitude: 23.10229,longitude: 113.3345211,},animationEnd() {//console.log('animation end')}})},//事件回调函数mapLin: function (e) {var that=this;wx.showActionSheet({itemList: ["驾车", "公交", "骑行","步行"],success(res) {switch(res.tapIndex){case 0: pathLin(that, "driving"); break;case 1: pathLin(that, "transit"); break;case 2: pathLin(that, "bicycling"); break;case 3: pathLin(that, "walking"); break;}},})},overlooking:function(){var that=this;that.setData({ overlooking:true})},// 显示/掩藏tbrtbr:function(){var that=this;if(tbr){wx.showTabBar();wx.getSystemInfo({success: function (res) {that.setData({winH: (res.windowHeight),})},});}else{wx.hideTabBar();wx.getSystemInfo({success: function (res) {that.setData({winH: (res.windowHeight+50),})},});}tbr = !tbr;}
})
// 地图路径规划
function pathLin(_this,linType){wx.getLocation({type: 'gcj02',success(res) {F_wd = res.latitude;F_jd = res.longitude;From = F_wd + "," + F_jd;;}})//网络请求设置var opt = {//WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填url: 'https://apis.map.qq.com/ws/direction/v1/'+linType+'/?from=' + From + '&to=' + To + '&key=' + Config.MapKey,method: 'GET',dataType: 'json',//请求成功回调success: function (res) {//console.log(res)var ret = res.data;var steps = ret.result.routes[0].steps;//路标指示var distance = ret.result.routes[0].distance; //总长度var duration = ret.result.routes[0].duration;//总耗时if (ret.message == "query ok") {var result = ret.result;if (ret.status != 0) return; //服务异常处理var coors = ret.result.routes[0].polyline, pl = [];//坐标解压（返回的点串坐标，通过前向差分进行压缩）var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({ latitude: coors[i], longitude: coors[i + 1] })}//设置polyline属性，将路线显示出来_this.setData({polyline: [{points: pl,color: '#FF000088',arrowLine:true,width: 8}],distance: distance,duration: duration})}}};wx.request(opt);
}
// 显示未完成
function showIID(that, adminId, pid, tid, title){clearInterval(intervalCode)that.hideModal();var content ="感谢您对我司服务的支持，这是我司编号" + adminId + "为您服务，请记得为我司服务人员点赞，如果您对我司的服务存在问题，请与我们联系！";wx.showModal({title: title,content: content,cancelText: "关闭",confirmText: "点赞",success(res) {if (res.confirm) {wx.navigateTo({url: "../xichefk/xichefk?positionId=" + pid + "&adminId=" + adminId + "&tpId=" + tid})} else if (res.cancel) {//console.log('用户点击取消')}}})
}
//判断字符是否为空的方法
function isEmpty(obj) {if (typeof obj == "undefined" || obj == null || obj == "") {return true;} else {return false;}
}
// 路径地图位置渲染
function linPatnPosition(that){var fmmtJWArray=[];wx.getLocation({type: "gcj02",success: function (res) {F_wd = res.latitude;F_jd = res.longitude;From = F_wd + "," + F_jd;api.postUserTempPosition({positionId: position,positionType: "user",positionData: JSON.stringify(res)}).then(function (e) {// //console.log();//console.log(e[0])var atp = null, utp = null;if (!isEmpty(e[0].adminId_temp_position)) {//console.log(e[0].adminId_temp_position)atp = JSON.parse(e[0].adminId_temp_position);fmmt[1] = {id: e[0].pid + positionType + 2,latitude: atp.latitude,longitude: atp.longitude,callout: {content: "服务员：" + e[0].adminId + "号" + "\n 电话：" + e[0].userMobile + "\n",color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}};}if (!isEmpty(e[0].userId_temp_position)) {console.log(e[0].userId_temp_position)utp = JSON.parse(e[0].userId_temp_position);fmmt[2] = {id: e[0].pid + positionType + 2,latitude: utp.latitude,longitude: utp.longitude,}}if (positionType == "song") {//console.log(positionType);fmmt[3] = {id: e[0].pid + positionType + 3,latitude: e[0].car_songchedi_latitude,longitude: e[0].car_songchedi_longitude,callout: {content: "送达地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}};that.setData({markers: fmmt,polyline: [{points: JSON.parse(e[0].songChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].songChe_distance,duration: e[0].songChe_duration});//console.log("ss1")//console.log(fmmt)} else {//console.log(positionType)fmmt[3] = {id: e[0].pid + positionType + 3,latitude: e[0].car_quchedi_latitude,longitude: e[0].car_quchedi_longitude,callout: {content: "取车地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}};that.setData({markers: fmmt,polyline: [{points: JSON.parse(e[0].quChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].quChe_distance,duration: e[0].quChe_duration});//console.log("ss2")//console.log(fmmt)}})},});
}function iscf(a,b){if(a==null){return false;}else{return a==b?false:true;}
}function loadData(that){qqmapsdk = new QQMapWX({key: Config.MapKey});mapCtx = wx.createMapContext('myMap')api.getAdminMap({jd: 1,wd: 1}).then(function (e) {T_wd = e[0].wd;T_jd = e[0].jd;radius = e[0].radius * 1To = T_wd + "," + T_jd;var adminMK = {id: 1,title: '123',latitude: T_wd,longitude: T_jd,alpha: 0.7,callout: {content: e[0].title,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#ff3300",padding: "10",boxShadow: "10",display: "ALWAYS"}};that.setData({latitude: T_wd,longitude: T_jd,markers: [adminMK],circles: [{latitude: T_wd,longitude: T_jd,color: '#FF000055',fillColor: '#7cb5ec11',radius: radius,strokeWidth: 1}]});fmmt[0] = adminMK;});
}

.login_windows{position: fixed;z-index: 50;left: 0;top: 0;width: 750rpx;height: 100%;background-color: rgba(101, 101, 101, 0.52);
}
.login_main{/* margin: 0 auto; */top:25%; left: 20%;position: fixed;display: flex;flex-direction: column;width: 400rpx;/* height: 200px; */padding: 20px;border-radius: 5px;background-color: #fff;
}
.login_context{margin-top: 10px;margin-bottom: 10px;font-size: 0.8em;text-align: center;
}
.login_btn{margin-top: 10px;/* margin-bottom: 10px; */text-align: center;
}
.icon:active{background-color: rgb(248, 245, 245);
}
.page-section-gap{box-sizing: border-box;padding: 0;
}
.page-body-button {margin-bottom: 20rpx;
}
.controls {position: absolute;right: 5px;bottom: 5px;background-color: rgba(69, 69, 70, 0.548);width: 100rpx;display: flex;flex-direction: column;border-radius: 10px;
}
.tabar{position: absolute;top: 0px;left: 0px;display: flex;flex-direction: row;background-color: rgba(69, 69, 70, 0.548);color:  #fff;padding: 0px;
}
.tabar-item{padding: 8px;
}
.tabar-item:active{background-color: rgba(194, 194, 197, 0.548);
}
.map_sever_btn{width: 40px;height: 40px;background-color: rgba(69, 69, 70, 0.548);position: absolute;bottom: 100rpx;border-radius: 40px;font-size: 30px;line-height: 60px;text-align: center;color: rgba(255, 255, 255, 0.7);padding: 10px 10px 10px 10px;}
.map_sever_btn:active{background-color: rgba(69, 69, 70, 0.733);box-shadow: 0px 0px 10px 5px #888888;
}
.map_sever_btn_img{width: 30px;height: 30px;margin: 0 auto;margin-top: 3px;
}
.qrcode{position: absolute;top:200px;display: flex;flex-direction: column;margin: 0 auto;
}
.canvas{width: 150px;height: 150px;
}
/**弹框**/
.modal-dialog {width: 600rpx;/* height: 321rpx; */overflow: hidden;position: fixed;top: 30%;left: 0;z-index: 9999;background-color:rgba(0,0,0,0.8);margin: -180rpx 75rpx;border-radius: 6rpx;
}
.modal-title {padding-left: 38rpx;padding-top: 24rpx;color: #ffffff;text-align: left;
}.modal-content{padding-top: 30rpx;font-size: 25rpx;color: #ffffff;text-align: center;
}
.modal-canvas{width: 150px;padding: 15px;margin: 0 auto;background-color: #fff;
}.modal-footer {padding-top: 60rpx;padding-bottom: 40rpx;display: flex;flex-direction: row;height: 86rpx;border-top: 0px solid rgba(0,0,0,0.8);font-size: 34rpx;line-height: 86rpx;
}
.btn-confirm {margin-left: 111rpx;width: 134rpx;height: 68rpx;line-height: 68rpx;color: #ffffff;font-size: 32rpx;text-align: center;background-color: #146755;border-radius: 33rpx;
}
.btn-cancel {text-align: center;margin-left: 111rpx;width: 134rpx;height: 68rpx;line-height: 68rpx;color: #333333;font-size: 32rpx;background-color: #cccccc;border-radius: 33rpx;
}
.sf{position: absolute;left: 20px;top: 45%;display: flex;flex-direction: column;
}
.sf_btn{margin: 10px;background-color: rgba(255, 255, 255, 0.836);border-radius: 5px;padding: 5px;text-align: center;
}
.sf_btn:active{background-color: rgb(216, 213, 213);
}

配送管理端

<view class="page-body"><view class="page-section page-section-gap"><mapid="myMap"style="width: 100%;height:{{winH}}px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" covers="{{covers}}" polyline="{{polyline}}" enable-overlooking='{{true}}' enable-rotate="{{true}}" show-location="{{true}}" show-compass="{{true}}" bindmarkertap="bindmarkertap" bindregionchange="bindregionchange" bindcallouttap="bindcallouttap" bindpoitap="bindpoitap" ></map></view><cover-view class='controls'><cover-image src='../../images/quanpin.png' bindtap="getAllMap" class="icon"></cover-image><cover-image src='../../images/dibiao.png' bindtap="getTo" class="icon"></cover-image><cover-image src='../../images/dingwei.png' bindtap="moveToLocation" class="icon"></cover-image></cover-view><cover-view class='tabar'><cover-view class='tabar-item' wx:if="{{distance}}">路程：{{distance}} 米</cover-view><cover-view class='tabar-item' wx:if="{{duration}}">时长：{{duration}} 分</cover-view></cover-view><cover-view class='map_sever_btn' style='left:{{btnLeftX}}px' bindtap='_severe_btn_'><cover-image class='map_sever_btn_img' src='../../images/scanCode.png'></cover-image></cover-view><cover-view class='context'><cover-view class='context_title'>客户信息<cover-view class='context_close' wx:if="{{dogg}}" bindtap='dogg'>☒</cover-view><cover-view class='context_close' wx:if="{{!dogg}}" bindtap='dogg'>▼</cover-view></cover-view><cover-view class='context_list' wx:if="{{dogg}}"><cover-view bindtap='open' class='context_list_item' wx:for="{{userList}}" wx:for-item="k"><cover-view class='context_list_item_item context_list_item_border'><cover-view class='context_list_item_view carid'>{{k.carId}}</cover-view><cover-view class='context_list_item_view uname'>{{k.userName}}</cover-view></cover-view><cover-view class='context_list_item_item'><cover-image src='../../images/id.png' bindtap='openUser' data-id='{{k._id}}' class="icon_list"></cover-image><cover-image src='../../images/luxian.png' bindtap="mapLin" wx:if="{{pathLinType=='songche'}}" data-id='{{k._id}}' data-userId="{{k.userId}}" data-carId="{{k.carId}}" data-jd='{{k.car_songchedi_longitude}}' data-wd='{{k.car_songchedi_latitude}}' class='icon_list'></cover-image><cover-image src='../../images/luxian.png' bindtap="mapLin" wx:if="{{pathLinType=='quche'}}" data-id='{{k._id}}' data-userId="{{k.userId}}" data-carId="{{k.carId}}" data-jd='{{k.car_quchedi_longitude}}' data-wd='{{k.car_quchedi_latitude}}' class='icon_list'></cover-image><cover-image src='../../images/call.png' data-phoneNuber='{{k.userMobile}}' bindtap='phoneCall' class="icon_list"></cover-image><cover-image src='../../images/more.png' bindtap='phoneCall' class="icon_list"></cover-image></cover-view></cover-view></cover-view></cover-view><!-- <button size='mini' bindtap="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button> --><!-- <cover-view size='mini' bindtap="driving" class='icon luxian'></cover-view><cover-view size='mini' bindtap="getCenterLocation" class="icon quanzai"></cover-view><cover-view size='mini' bindtap="translateMarker" class="icon zhondian"></cover-view><cover-view size='mini' bindtap="moveToLocation" class="icon dingwei"></cover-view> -->
</view>

var QQMapWX = require('../../utils/lbs/qqmap-wx-jssdk.js');
var config = require("../../utils/config.js");
var api = require('../../utils/api.js');
var Code = require('../../utils/code.js');
var Config = config.Api;
var kehuId=null;
var tbr=true;
var mapCtx;
var qqmapsdk;
var From,F_jd,F_wd,F_name;
var To, T_jd, T_wd,T_title,T_name;
var pathLinType=null;
var ds_position=null;
var Markers=[];
var allMapPosition = [];
var fmmt = [null, null, null, null]
var positionType;
Page({/*** 页面的初始数据*/data: {overlooking:true,dogg:false,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this;pathLinType = options.type;if (pathLinType=="songche"){positionType="song";wx.setNavigationBarTitle({title: '送车地图'})}else{positionType="qu";wx.setNavigationBarTitle({title: '取车地图'})}// 实例化API核心类qqmapsdk = new QQMapWX({key: Config.MapKey});mapCtx = wx.createMapContext('myMap')api.getAdminMap({jd:1,wd:1}).then(function (e) {T_wd = e[0].wd;T_jd = e[0].jd;T_title = e[0].title;To = T_wd + "," + T_jd;let markers={id: e[0]._id,latitude: T_wd,longitude: T_jd,callout: {content: e[0].title,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#ff3300",padding: "10",boxShadow: "10",display: "ALWAYS",}};fmmt[0]=markers;Markers.push(markers);that.setData({latitude: T_wd,longitude: T_jd,markers: Markers,})});onLoad(that);},// 跳转到目的地getTo:function(e){var that = this;mapCtx.getCenterLocation({success: function (res) {//console.log(res)that.setData({covers:  {latitude: T_wd,longitude: T_jd,iconPath: '/images/location.png'}})},})},
// 显示所有经纬getAllMap:function(){var that=this;mapCtx.includePoints({points: that.data.allMapPosition,padding:[50,50,50,50],});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function (e) {var that = this;wx.hideTabBar({animation: true,success: function (e) {//console.log("关闭下控件")}})wx.getSystemInfo({success: function (res) {that.setData({ winH: (res.screenHeight-res.statusBarHeight-50) ,btnLeftX: ((res.windowWidth / 2)-30)})},});wx.getLocation({type: 'gcj02',success(res) {F_wd = res.latitude;F_jd = res.longitude;From = F_wd + "," + F_jd;}})},
// 下角中间大按钮事件（扫码）_severe_btn_:function(){var that=this;if (kehuId != null && kehuId!=""){wx.scanCode({onlyFromCamera: true,success(res) {var time=res.result.substring(0,8);var code=res.result.substring(13);var id=Code.decrypt(code)api.getPeisongData({positionid: id}).then(function (e) {//console.log(e)var content ="车 牌：" + e[0].carId + "\r\n" +"车 色：" + e[0].carColor + "\r\n" +"姓 名：" + e[0].userName + "\r\n" +"电 话：" + e[0].userMobile + "\r\n" +"取车地址：" + e[0].car_quchedi_name + "\r\n" +"取车时间：" + e[0].car_quchedi_time + "\r\n" +"送车地址：" + e[0].car_songchedi_name + "\r\n" +"送车时间：" + e[0].car_songchedi_time + "\r\n";wx.showModal({title: '客户信息',content: content,success(res) {if (res.confirm) {api.setPeisongIID({id: time + code,iidType: pathLinType}).then(function (e) {onLoad(that);wx.showToast({title: "提交成功",icon: 'success',duration: 2000})})} else if (res.cancel) {wx.showToast({title: '取消成功',icon: 'success',duration: 2000})}}})})}})}else{wx.showModal({title: '操作提示',content: '您目前操作的存在以下问题：1.您为点击取车或送车对象。2.数据不存在该订单。3.系统出现BUG。',showCancel:false,success(res) { }})}},
// 拨打电话phoneCall:function(e){//console.log(e.currentTarget.dataset.phonenuber)wx.makePhoneCall({phoneNumber: e.currentTarget.dataset.phonenuber //仅为示例，并非真实的电话号码})},
// 弹窗展示提示dogg:function(e){var that=this;that.setData({ dogg: !that.data.dogg})},/*** 生命周期函数--监听页面显示*/onShow: function () {var that = this;},/*** 生命周期函数--监听页面隐藏*/onHide: function () {clearInterval(ds_position)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},getCenterLocation: function () {mapCtx.getCenterLocation({success: function (res) {//console.log(res.longitude)//console.log(res.latitude)}})},// 移动到当前（定位）位置moveToLocation: function () {mapCtx.moveToLocation();},translateMarker: function () {mapCtx.translateMarker({markerId: 1,autoRotate: true,duration: 1000,destination: {latitude: 23.10229,longitude: 113.3345211,},animationEnd() {//console.log('animation end')}})},//路径设置mapLin: function (e) {//console.log(e)var Tos;var that = this;var id = e.currentTarget.dataset.id;var userId = e.currentTarget.dataset.userid;var carId = e.currentTarget.dataset.carid;if(id){var jd = e.currentTarget.dataset.jd;var wd = e.currentTarget.dataset.wd;Tos = wd + "," + jd;}else{Tos=false;}wx.showActionSheet({// itemList: ["驾车", "公交", "骑行", "步行", "刷新驾车"],itemList: ["驾车","刷新驾车"],success(res) {switch(res.tapIndex){case 0: pathLin(that, "driving", Tos, that.data.waypoints, id,userId, carId,1); break;case 1: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId,0); break;// case 0: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId, 1); break;// case 1: pathLin(that, "transit", Tos, that.data.waypoints, id, userId, carId, 0); break;// case 2: pathLin(that, "bicycling", Tos, that.data.waypoints, id, userId, carId, 0); break;// case 3: pathLin(that, "walking", Tos, that.data.waypoints, id, userId, carId, 0); break;// case 4: pathLin(that, "driving", Tos, that.data.waypoints, id, userId, carId, 0); break;}},})},overlooking:function(){var that=this;that.setData({ overlooking:true})},// 显示/掩藏tbrtbr:function(){if(tbr){wx.showTabBar({})}else{wx.hideTabBar()}tbr = !tbr;},// 打开客户信息openUser:function(e){var id = e.currentTarget.dataset.id;api.getPeisongData({positionid:id,file:"position"}).then(function(e){//console.log(e)var content = " 车 牌 ：" + e[0].carId +"\r\n"+" 车 色 ：" + e[0].carColor + "\r\n" +" 姓 名 ：" + e[0].userName + "\r\n" +" 电 话 ：" + e[0].userMobile + "\r\n" +"取车地址：" + e[0].car_quchedi_name + "\r\n" +"取车时间：" + e[0].car_quchedi_time + "\r\n" +"送车地址：" + e[0].car_songchedi_name + "\r\n" +"送车时间：" + e[0].car_songchedi_time + "\r\n" ;wx.showModal({title: '客户信息',content: content,success(res) {if (res.confirm) {//console.log('用户点击确定');} else if (res.cancel) {//console.log('用户点击取消');}}})})},bindcallouttap: function (e) {console.log(e)},
})
// 获取道路规划
function pathLin(_this, linType, Tos, waypoints, id,userId,carId,sx){// var _this = this;kehuId=id;To=Tos? Tos : To;var wps=waypoints?"&waypoints="+waypoints:"";//网络请求设置var opt = {//WebService请求地址，from为起点坐标，to为终点坐标，开发key为必填url: 'https://apis.map.qq.com/ws/direction/v1/' + linType + '/?from=' + From + '&to=' + To + '&key=' + Config.MapKey + wps,method: 'GET',dataType: 'json',//请求成功回调success: function (res) {//console.log(res)var ret = res.data;var steps = ret.result.routes[0].steps;//路标指示var distance = ret.result.routes[0].distance; //总长度var duration = ret.result.routes[0].duration;//总耗时var steps = ret.result.routes[0].steps;//路径到位wx.showToast({title: ret.message,})if (ret.message == "query ok") {var result = ret.result;if (ret.status != 0) return; //服务异常处理var coors = ret.result.routes[0].polyline, pl = [];//坐标解压（返回的点串坐标，通过前向差分进行压缩）var kr = 1000000;for (var i = 2; i < coors.length; i++) {coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;}//将解压后的坐标放入点串数组pl中for (var i = 0; i < coors.length; i += 2) {pl.push({ latitude: coors[i], longitude: coors[i + 1] })}api.postUserPath({// data:{id: id,carId: carId,adminId: wx.getStorageSync("MemberID"),adminMobile: wx.getStorageSync("userMobile") || wx.getStorageSync("MemberMobile"),userId: userId,adminId_temp_wd: F_wd,adminId_temp_jd: F_jd,userId_temp_wd: T_wd,userId_temp_jd: T_jd,pathLin: JSON.stringify(pl),iid: 1,able: 1,distance: distance,duration: duration,pathLinType: pathLinType,steps: JSON.stringify(steps)// }}).then(function (e) {kehuId = e;})// //console.log(pl)//设置polyline属性，将路线显示出来_this.setData({polyline: [{points: pl,arrowLine: true,color: '#FF0000DD',width: 8}],distance: distance,duration: duration});}}};api.getPeisongData({positionid:kehuId}).then(function(e){//console.log(e[0]);var tp=true;if (!e[0]){tp=false;}if (pathLinType=="songche"){if (tp == false || sx == 0 || e[0].songChePathLin == null || e[0].songChePathLin == ""){wx.request(opt);getTimePosition(_this);}else{_this.setData({polyline: [{points: JSON.parse(e[0].songChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].songChe_distance,duration: e[0].songChe_duration});getTimePosition(_this);}}else{if (tp == false || sx == 0 || e[0].quChePathLin == null || e[0].quChePathLin == ""){//console.log("quche_1");wx.request(opt);getTimePosition(_this);}else{_this.setData({polyline: [{points: JSON.parse(e[0].quChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].quChe_distance,duration: e[0].quChe_duration});getTimePosition(_this);}}})
}
// 获取位置及道路
function getPosition(_this) {linPatnPosition(_this)
}
// 定时刷新道路及图标
function getTimePosition(_this){ds_position = setInterval(function () {getPosition(_this);}, 5000);
}
// 刷新地图图样（位置等）
function onLoad(that){api.getListUser({file:"getListUser",fileType:pathLinType}).then(function (e) {var mk, amp;e.data.forEach(function (res, k) {if (pathLinType == "songche") {mk = {id: res._id,latitude: res.car_songchedi_latitude,longitude: res.car_songchedi_longitude,callout: {content: res.car_songchedi_name,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}}amp = {latitude: res.car_songchedi_latitude,longitude: res.car_songchedi_longitude,}} else {mk = {latitude: res.car_quchedi_latitude,longitude: res.car_quchedi_longitude,callout: {content: res.car_quchedi_name,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}}amp = {latitude: res.car_quchedi_latitude,longitude: res.car_quchedi_longitude,}}Markers.push(mk);allMapPosition.push(amp)})allMapPosition.forEach(function (e, k) {//console.log(e)})that.setData({pathLinType: pathLinType,userList: e.data,markers: Markers,allMapPosition: allMapPosition,// waypoints: waypoints})});
}
// 获取道路规划及标点
function linPatnPosition(that,pid) {var fmmtJWArray = [];wx.getLocation({type: "gcj02",success: function (res) {F_wd = res.latitude;F_jd = res.longitude;From = F_wd + "," + F_jd;api.postAdminTempPosition({positionId: kehuId,positionType: "admin",positionData: JSON.stringify(res)}).then(function (e) {//console.log();//console.log(e)var atp = null, utp = null;if (!isEmpty(e[0].adminId_temp_position)) {//console.log(e[0].adminId_temp_position)atp = JSON.parse(e[0].adminId_temp_position);fmmt[1] = {id: e[0]._id + positionType + 2,latitude: atp.latitude,longitude: atp.longitude};}if (!isEmpty(e[0].userId_temp_position)) {//console.log(e[0].userId_temp_position)utp = JSON.parse(e[0].userId_temp_position);fmmt[2] = {id: e[0]._id + positionType + 2,latitude: utp.latitude,longitude: utp.longitude,callout: {content: "车主：" + e[0].userName +  "-" + e[0].userMobile+"\n" + "信息：" + e[0].carId + "-" + e[0].carColor,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}}}if (positionType == "song") {//console.log(positionType)fmmt[3] = {id: e[0]._id + positionType + 3,latitude: e[0].car_songchedi_latitude,longitude: e[0].car_songchedi_longitude,callout: {content: "送达地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}};that.setData({markers: fmmt,polyline: [{points: JSON.parse(e[0].songChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].songChe_distance,duration: e[0].songChe_duration});//console.log("ss1")//console.log(fmmt)} else {//console.log(positionType)fmmt[3] = {id: e[0]._id + positionType + 3,latitude: e[0].car_quchedi_latitude,longitude: e[0].car_quchedi_longitude,callout: {content: "取车地：" + e[0].car_songchedi_name + "\n" + "信息：" + e[0].carId + "-" + e[0].carColor,color: "#ffffff",fontSize: "12",borderRadius: "8",bgColor: "#336699",padding: "6",boxShadow: "",display: "ALWAYS"}};that.setData({markers: fmmt,polyline: [{points: JSON.parse(e[0].quChePathLin),arrowLine: true,color: '#FF0000DD',width: 8}],distance: e[0].quChe_distance,duration: e[0].quChe_duration});}})},});
}//判断字符是否为空的方法
function isEmpty(obj) {if (typeof obj == "undefined" || obj == null || obj == "") {return true;} else {return false;}
}

@import "/asset/icon_my.wxss";
@import "/pages/xiche/icon.wxss";.icon:active{background-color: rgb(248, 245, 245);
}
.page-section-gap{box-sizing: border-box;padding: 0;
}
.page-body-button {margin-bottom: 20rpx;
}
.controls {position: absolute;right: 5px;bottom: 5px;background-color: rgba(69, 69, 70, 0.548);width: 100rpx;display: flex;flex-direction: column;border-radius: 10px;
}
.tabar{position: absolute;top: 0px;right: 0px;display: flex;flex-direction: column;background-color: rgba(69, 69, 70, 0.548);color:  #fff;padding: 0px;
}
.tabar-item{padding: 8px;
}
.tabar-item:active{background-color: rgba(194, 194, 197, 0.548);
}
.map_sever_btn{width: 40px;height: 40px;background-color: rgba(69, 69, 70, 0.548);position: absolute;bottom: 100rpx;border-radius: 40px;font-size: 30px;line-height: 60px;text-align: center;color: rgba(255, 255, 255, 0.7);padding: 10px 10px 10px 10px;}
.map_sever_btn:active{background-color: rgba(69, 69, 70, 0.733);box-shadow: 0px 0px 10px 5px #888888;
}
.map_sever_btn_img{width: 35px;height: 35px;margin: 0 auto;margin-top: 3px;
}
.context{position: absolute;top: 0px;left: 0px;width: 500rpx;/* height: 300px; */background-color: rgba(69, 69, 70, 0.733);overflow-y: scroll;
}
.context_title{background-color: rgba(69, 69, 70, 0.733);padding: 5px 0 5px 10px;color: #fff;/* display: flex;flex-direction: row; */
}
.context_close{float: right;padding: 0px 10px;margin-right: 20px;font-size: 1.3em;
}
.context_list{width: 500rpx;height: 250px;overflow-y: scroll;
}
.context_list_item{padding: 8px;display: flex;flex-direction: column;color: #fff;font-size: 0.9em;border: 1px solid #888888;
}
.context_list_item_item{display: flex;flex-direction: row;margin: 5px 0;
}
.context_list_item_view{padding: 0px 5px;
}
.icon_list{width:50rpx;height:50rpx;background-size:70rpx;font-size:70rpx;margin: 0 auto;/* margin:15rpx; */color:rgba(255, 255, 255, 0.7);
}
.icon_list:active{background-color: rgba(255, 255, 255, 0.863);
}
.carid{width: 200rpx;
}
.uname{width: 100rpx;
}
.context_list_item_border{border-bottom:1px solid rgba(153, 153, 153, 0.658);
}

服务器端/PC管理端

》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

微信小程序地图导航集成（PHP）相关推荐

微信小程序---地图导航（点击地址，可以进行导航）
微信小程序-地图导航(点击地址,可以进行导航) // 地图getLocation(e){var that = this,address = e.currentTarget.dataset.addres ...
微信小程序地图导航源码、地图导航小程序源码
最近研究了微信小程序地图功能,编写了地图导航功能的Demo(文章尾部附有下载地址). 1.用户定位功能:用户同意小程序获取位置权限,并定位用户当前位置: 2.选择目的地,并开始自动导航功能 2.选择交 ...
微信小程序地图导航（跳转到第三方导航）
目录所需API 所需参数 wxml JS 效果图所需API wx.openLocation 在这里,我们需要用到微信官方文档的位置API wx.openLocation 其中的参数有很多,具体可参 ...
微信小程序-地图导航
功能描述:发布信息的时候选择位置:详情页展示的时候展示位置名称并且可以导航到该位置. 1)选择位置 chooseLocation: function () {let that = this;wx.ch ...
微信小程序开发：集成腾讯地图的步骤
在微信小程序开发的时候,会避免不了的使用腾讯送的大礼包,从微信支付到腾讯地图,一条龙的服务,不得不说鹅厂的实力,但是话又说回来了,鹅厂的官方API真是不敢恭维,尤其是微信小程序开发文档,如果不熟悉的话 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序ar导航特点详解
微信小程序通过便捷的使用方式和较低的获客成本,全面覆盖了各个领域,不断改善我们的生活方式,而AR导航解决了导航最后一公里的问题,突破传统的地图导航.指示牌指引.问路等方式带来的不便,能够在眼睛看到的实 ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...

微信小程序地图导航集成（PHP）

微信小程序地图导航集成（PHP）相关推荐

最新文章

热门文章