molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-03-14 19:24:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
7small7
2023-07-08 20:43:12 +08:00
parent 4de9a1bf43
commit f5718ab30b
283 changed files with 0 additions and 68138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
takeOutPage/static/images/location.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.5 KiB

BIN
takeOutPage/static/images/take_out_car.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.2 KiB

226
takeOutPage/walking-route/walking-route.vue
View File

@@ -1,226 +0,0 @@
<template>
<view class="take-out__walking-route">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>路线轨迹</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<map
class="take-out__map"
:longitude="location.longitude"
:latitude="location.latitude"
:scale="18"
:polyline="mapPolyline"
:markers="mapMarkers"
></map>
</view>
<tn-modal
v-model="openSettingFlag"
:custom="true"
:showCloseBtn="true"
width="auto"
padding="40rpx 80rpx"
>
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
<view class="tn-text-bold tn-text-lg">授权使用位置信息</view>
<view class="tn-margin-top-xs tn-color-gray">获取定位失败, 请进行设置</view>
<view class="tn-margin-top">
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" @click="openSetting">打开设置</tn-button>
</view>
</view>
</tn-modal>
</view>
</template>
<script>
export default {
name: 'takeOutWalkingRoute',
data() {
return {
openSettingFlag: false,
location: {
latitude: 22.970675,
longitude: 113.334259
},
mapPolyline: [{
points: [
{latitude: 22.969238, longitude: 113.333890},
{latitude: 22.969309, longitude: 113.333878},
{latitude: 22.969334, longitude: 113.334132},
{latitude: 22.969649, longitude: 113.334130},
{latitude: 22.970044, longitude: 113.334130},
{latitude: 22.970578, longitude: 113.334130},
{latitude: 22.970606, longitude: 113.334255},
{latitude: 22.970667, longitude: 113.334345},
{latitude: 22.970673, longitude: 113.334458},
{latitude: 22.970798, longitude: 113.334452},
{latitude: 22.970962, longitude: 113.334530},
{latitude: 22.971108, longitude: 113.334564},
{latitude: 22.971111, longitude: 113.334631}
],
color: '#01BEFFFF',
width: 3,
arrowLine: true
}],
mapMarkers: [{
id: 0,
latitude: 22.971093,
longitude: 113.334740,
iconPath: '/takeOutPage/static/images/location.png',
width: 20,
height: 30,
callout: {
content: '您所在位置',
color: '#080808',
bgColor: 'transparent',
display: 'ALWAYS'
}
},{
id: 1,
latitude: 22.969238,
longitude: 113.333890,
iconPath: '/takeOutPage/static/images/take_out_car.png',
width: 30,
height: 30,
rotate: 270
}],
// 当前外卖小车的坐标位置Index
takeOutCarIndex: 0
}
},
onLoad() {
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
// this.getUserAuthorize()
// #endif
// #ifdef APP-VUE || H5
// this.getUserLocation()
// #endif
this.runIntervalTimer = setInterval(() => {
let rotate = 0
const pointsLength = this.mapPolyline[0].points.length
if (this.takeOutCarIndex >= pointsLength) {
this.takeOutCarIndex = 0
}
if (this.takeOutCarIndex < pointsLength - 2) {
const currentPoint = this.mapPolyline[0].points[this.takeOutCarIndex]
const nextPoint = this.mapPolyline[0].points[this.takeOutCarIndex+1]
rotate = this.getAngle(currentPoint, nextPoint)
}
this.mapMarkers[1].latitude = this.mapPolyline[0].points[this.takeOutCarIndex].latitude
this.mapMarkers[1].longitude = this.mapPolyline[0].points[this.takeOutCarIndex].longitude
this.mapMarkers[1].rotate = rotate === 0 ? 0 : rotate - 90
this.takeOutCarIndex++
}, 500)
},
onUnload() {
if (this.runIntervalTimer) {
clearInterval(this.runIntervalTimer)
}
},
methods: {
// 获取用户是否已经授权获取位置信息
getUserAuthorize() {
uni.authorize({
scope: 'scope.userLocation',
success: (res) => {
this.getUserLocation()
},
fail: (err) => {
// 获取权限失败，判断用户是否禁止了获取用户信息
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU || MP-LARK
uni.getSetting({
success: (settingRes) => {
if (!settingRes.authSetting.hasOwnProperty('scope.userLocation') || !settingRes.authSetting['scope.userLocation']) {
this.openSettingFlag = true
}
},
fail: (settingErr) => {}
})
// #endif
// #ifdef APP-VUE || H5
this.$tn.message.toast('获取定位失败, 请重试')
// #endif
}
})
},
// 获取用户的当前位置信息
getUserLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.location.latitude = res.latitude
this.location.longitude = res.longitude
},
fail: (err) => {
this.$tn.message.toast('获取定位失败, 请重试')
}
})
},
// 打开设置页面
openSetting() {
uni.openSetting({
success: (res) => {
if (res.authSetting.hasOwnProperty('scope.userLocation') && res.authSetting['scope.userLocation'] === true) {
this.openSettingFlag = false
this.getUserLocation()
} else {
this.$tn.message.toast('设置获取位置信息失败')
}
},
fail: (err) => {}
})
},
// 获取两点之间的角度
getAngle(current, next) {
let ret = 0
let w1 = current.latitude/180 * Math.PI
let j1 = current.longitude/180 * Math.PI
let w2 = next.latitude/180 * Math.PI
let j2 = next.longitude/180 * Math.PI
ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2)
ret = Math.sqrt(ret)
// var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
let temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2))
ret = ret/temp
ret = Math.atan(ret) / Math.PI * 180
ret += 90
// 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
if(j1-j2 < 0){
if(w1-w2 < 0){
ret = ret
}else{
ret = -ret+180
}
}else{
if(w1-w2 < 0){
ret = 180+ret
}else{
ret = -ret
}
}
return ret
}
}
}
</script>
<style lang="scss" scoped>
.take-out {
&__map {
width: 100%;
height: calc(100vh - 300px);
}
}
</style>