333 lines
7.5 KiB
Plaintext
333 lines
7.5 KiB
Plaintext
<template>
|
|
<view class="">
|
|
<map id="map" :polyline="polyline" lang="en" :longitude="center.longitude" :latitude="center.latitude"
|
|
:scale="scale" :controls="controls" :markers="markers" bindmarkertap="handleMarkerTap" show-location
|
|
:style="'width:' + windowWidth + 'px;' + 'height:'+ windowHeight+'px;' ">
|
|
</map>
|
|
<view class="top_">
|
|
<view class="top_buttom">
|
|
<image src="/static/imgs/navgation.png" style="width: 40rpx; height: 40rpx;margin-right: 5px; "></image>
|
|
<view class=""> <text class="wt_size" > {{routeTitle}}</text> </view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="bottom_">
|
|
|
|
<view class="bottom_right">
|
|
<text class="c_text">distance: {{distance.toFixed(2)}} KM</text>
|
|
<text class="c_text" style="color: #a1a1a1;">time: {{duration.toFixed(2)}} min</text>
|
|
</view>
|
|
<view class="bottom_left" @click="goback()">
|
|
<view class="">
|
|
<image src="/static/imgs/kg.png" style="width: 16px; height: 16px; margin-right: 5px; "></image>
|
|
</view>
|
|
<view class=""> <text style="font-size: 14px; ">exit</text> </view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request'
|
|
import config from '@/config'
|
|
export default {
|
|
data() {
|
|
return {
|
|
//打车预估路线
|
|
polyline: [],
|
|
center: {
|
|
latitude: null,
|
|
longitude: null
|
|
},
|
|
_mapContext: null,
|
|
scale: 18,
|
|
controls: [],
|
|
markers: [],
|
|
startPoint: '',
|
|
endPoint: '',
|
|
// 接口返回
|
|
container: {},
|
|
routeTitle:'',
|
|
distance: 0,
|
|
duration: 0
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.getLatLon()
|
|
|
|
uni.showLoading({
|
|
title: 'Loading...'
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
}, 2000);
|
|
|
|
this.endPoint = option.endPoint.split(',')
|
|
this.startExecution()
|
|
|
|
|
|
this.timer = setInterval(() => {
|
|
this.getLatLon()
|
|
this.startExecutionCopy()
|
|
}, 5000);
|
|
|
|
},
|
|
computed: {
|
|
windowHeight() {
|
|
return uni.getSystemInfoSync().windowHeight;
|
|
},
|
|
windowWidth() {
|
|
return uni.getSystemInfoSync().windowWidth;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
startExecution() {
|
|
console.log(this.center.longitude, this.center.latitude);
|
|
if (this.endPoint) {
|
|
request({
|
|
url: 'walkApi/getRouteInfo',
|
|
method: 'post',
|
|
data: {
|
|
startLocationLng: this.startPoint[0],
|
|
startLocationLat: this.startPoint[1],
|
|
endLocationLng: this.endPoint[0],
|
|
endLocationLat: this.endPoint[1],
|
|
}
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
this.container = res.data
|
|
this.distance = res.data.distance / 1000
|
|
this.duration = res.data.duration / 60
|
|
this.routeTitle = res.data.steps[0].instruction
|
|
//路线规划
|
|
this.polyline = []
|
|
let item = {}
|
|
item.color = '#00aa00'
|
|
item.points = res.data.polyline
|
|
item.width = 11
|
|
item.arrowLine = true
|
|
this.polyline.push(item)
|
|
|
|
let marksLength = this.markers.length
|
|
let markers = JSON.parse(JSON.stringify(this.markers))
|
|
this.markers = []
|
|
|
|
markers.push({
|
|
id: marksLength + 2,
|
|
iconPath: config.markIcon,
|
|
latitude: this.endPoint[1],
|
|
longitude: this.endPoint[0],
|
|
width: 38,
|
|
height: 38,
|
|
})
|
|
this.markers = markers
|
|
this._mapContext.addMarkers({
|
|
markers,
|
|
clear: false,
|
|
complete(res) {}
|
|
})
|
|
this.center.longitude = this.startPoint[0]
|
|
this.center.latitude = this.startPoint[1]
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
startExecutionCopy() {
|
|
console.log(this.center.longitude, this.center.latitude);
|
|
if (this.endPoint) {
|
|
request({
|
|
url: 'walkApi/getRouteInfo',
|
|
method: 'post',
|
|
data: {
|
|
startLocationLng: this.startPoint[0],
|
|
startLocationLat: this.startPoint[1],
|
|
endLocationLng: this.endPoint[0],
|
|
endLocationLat: this.endPoint[1],
|
|
}
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.code == 200) {
|
|
this.container = res.data
|
|
this.distance = res.data.distance / 1000
|
|
this.duration = res.data.duration / 60
|
|
//路线规划
|
|
this.polyline = []
|
|
let item = {}
|
|
item.color = '#00aa00'
|
|
item.points = res.data.polyline
|
|
item.width = 11
|
|
item.arrowLine = true
|
|
this.polyline.push(item)
|
|
|
|
let marksLength = this.markers.length
|
|
let markers = JSON.parse(JSON.stringify(this.markers))
|
|
this.markers = []
|
|
|
|
this.markers = markers
|
|
|
|
this.center.longitude = this.startPoint[0]
|
|
this.center.latitude = this.startPoint[1]
|
|
}
|
|
|
|
})
|
|
}
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
},
|
|
getLatLon() {
|
|
let _this = this;
|
|
uni.getLocation({
|
|
// 谷歌使用wgs84 其他使用gcj02
|
|
type: 'gcj02', // 使用国测局坐标系
|
|
geocode: true,
|
|
success: function(res) {
|
|
console.log(res, 157);
|
|
_this.center.longitude = res.longitude
|
|
_this.center.latitude = res.latitude
|
|
_this.startPoint = []
|
|
_this.startPoint.push(res.longitude)
|
|
_this.startPoint.push(res.latitude)
|
|
},
|
|
fail: function(err) {
|
|
console.log('获取位置信息失败: ' + err.errMsg);
|
|
uni.setStorageSync("isGetAddress", false)
|
|
}
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
},
|
|
|
|
// 对于 TabBar 类型页面还需要额外关注 onHide 钩子
|
|
onHide() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.top_ {
|
|
position: fixed;
|
|
left: 0px;
|
|
top: 00rpx;
|
|
height: 200rpx;
|
|
background: #32714F;
|
|
box-sizing: border-box;
|
|
padding-top: 100rpx;
|
|
width: 750rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.top_buttom {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
box-sizing: border-box;
|
|
padding: 0px 30rpx;
|
|
}
|
|
|
|
.bottom_ {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
height: 130rpx;
|
|
width: 750rpx;
|
|
z-index: 999;
|
|
background: #fff;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
border-radius: 22px 22px 0px 0px;
|
|
}
|
|
|
|
.bottom_left {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-right: 30rpx;
|
|
border: 1px solid #e2e2e2;;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 5px 10px;
|
|
// border-right: 1px solid #e2e2e2;
|
|
}
|
|
|
|
.bottom_eright {
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.bottom_right {
|
|
|
|
// flex-direction: row;
|
|
// align-items: center;
|
|
// justify-content: space-around;
|
|
}
|
|
|
|
.c_text {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin: 0px 10px;
|
|
}
|
|
|
|
.scroll-container {
|
|
height: 200rpx;
|
|
/* 设定固定的高度 */
|
|
overflow: hidden;
|
|
backface-visibility: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.item-list {
|
|
width: 700rpx;
|
|
height: 90rpx;
|
|
/* 设定固定的高度 */
|
|
overflow: hidden;
|
|
backface-visibility: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
|
|
/* 启用原生滚动特性 */
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
/* 当内容超出了设定的高度，则允许内部内容滚动 */
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.list-item {
|
|
width: 700rpx;
|
|
padding: 10rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.wt_size {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
}
|
|
</style> |