今年同城服务类型项目比较热门,再说一下,开发过的 如何实现骑手地图的uniapp前端代码
参考效果 显示骑手位置 底部悬浮组建
我们开发过同城跑腿类型的 直接复制对应模块代码 里面图片和网络请求工具 记得自己处理成自己的就行 帮助你快速成品,我们跑腿源码也可以出售如果需要可以联系我
<template>
<view>
<map id="map" style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude" :markers="markers"
:show-location="true">
</map>
<cover-view class="controls-title">
<cover-view class="tabs_box">
<cover-image class="pay_img" src="../../static/images/order/avatar.png"></cover-image>
<cover-view class="flex flex-sub margin-left-sm flex-direction justify-between">
<cover-view class="pay_name">骑手预计{{rider.mDateTime[1]}}送达</cover-view>
<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
距离您{{rider.aDouble}}
</cover-view>
</cover-view>
<cover-view class="flex">
<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/order/im.png"></cover-image>
<cover-image class="pay_img1" @click="call" src="../../static/images/order/phone.png"></cover-image>
</cover-view>
</cover-view>
</cover-view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: '',
longitude: '',
markers: [], //标记点
orderId: '',
riderUserId: '',
orderDetails: {},
rider: {},
timer: '',
lat: '',
lng: '',
}
},
onLoad(option) {
let that = this
that.orderId = option.orderId
//获取到定位 经纬度
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function(res) {
that.lat = res.latitude;
that.lng = res.longitude;
that.getData()
}
});
},
onShow() {
//定时器检测获取位置
let that = this
that.timer = setInterval(function() {
that.getLocation()
}, 10000)
},
//页面关闭清理定时器
onHide() {
console.log(this.timer,'定时器')
clearInterval(this.timer)
},
//检测返回 清理定时器
onBackPress(e){
console.log("监听返回按钮事件",this.timer);
clearInterval(this.timer)
// 此处一定姚要return为true,否则页面不会返回到指定路径
return true;
},
methods: {
//这里是获取骑手的信息 对接自己的后台 自己用自己封装的api请求工具即可
getData() {
this.$Request.get('/app/order/selectOrderById?orderId=' + this.orderId).then(res => {
console.log(res)
if (res.code == 0) {
this.orderDetails = res.data
this.riderUserId = res.data.riderUserId
this.getLocation()
// console.log(this.markers)
}
});
},
//请求后端 骑手的位置信息
getLocation() {
let data = {
riderUserId: this.riderUserId,
lat: this.lat,
lng: this.lng
}
this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
if (res.code === 0) {
this.latitude = res.data.riderLocation.lat;
this.longitude = res.data.riderLocation.lng;
this.rider = res.data
this.rider.mDateTime = res.data.mDateTime.split(' ')
if (this.rider.aDouble > 1000) {
this.rider.aDouble = Number((this.rider.aDouble / 1000)).toFixed(2)+"km"
}else{
if(this.rider.aDouble==0){
this.rider.aDouble = "0m";
}else{
this.rider.aDouble = Number(this.rider.aDouble).toFixed(1) +"m";
}
}
let marker = {
id: 2,
latitude: res.data.riderLocation.lat,
longitude: res.data.riderLocation.lng,
iconPath: '../../static/images/order/rider.png',
width: '40',
height: '40',
}
this.markers.push(marker)
}
});
},
call() {
uni.makePhoneCall({
phoneNumber: this.orderDetails.riderPhone
});
},
goNav() {
uni.navigateTo({
url: '/my/setting/chat'
})
}
},
}
</script>
<style>
.controls-title {
width: 90%;
/* height: 220upx; */
/* line-height: 220upx; */
background: #FFFFFF;
position: fixed;
bottom: 0rpx;
margin: 40upx;
border-radius: 26upx;
box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
/* margin: 0 40rpx; */
margin-bottom: 50rpx;
}
.tabs_box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx;
margin: 20rpx;
}
.pay_tit {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pay_img {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
}
.pay_img1 {
width: 60rpx;
height: 60rpx;
border-radius: 10rpx;
}
.tabs_bottom {
margin: 0 20rpx 20rpx;
display: flex;
}
.pay_btn {
padding: 5rpx 16rpx;
border: solid 2rpx #999999;
margin-right: 20rpx;
display: flex;
align-items: center;
border-radius: 10rpx;
}
.pay_name {
font-size: 32rpx;
font-weight: bold;
}
.pay_line {
height: 2rpx;
background-color: #afafaf;
margin: 10rpx 0;
}
</style>