266 lines
6.7 KiB
Plaintext
266 lines
6.7 KiB
Plaintext
<template>
|
||
<view class="fui-wrap">
|
||
<map class="fui-map" :latitude="latitude" :longitude="longitude" :scale="15" show-location enable-rotate
|
||
:style="{height:mapHeight+'px'}" :polyline="polyline" :markers="markers" :circles="circles">
|
||
<!-- #ifndef MP-ALIPAY || H5 || MP-BAIDU -->
|
||
<cover-image class="fui-icon__back" src="/static/images/layout/icon_back_3x.png" @tap.stop="back" />
|
||
<!-- #endif -->
|
||
</map>
|
||
<view class="fui-content__box">
|
||
<view class="fui-content__inner">
|
||
<view class="fui-content__title">
|
||
<fui-text text="预计" size="36" fontWeight="500"></fui-text>
|
||
<fui-text :text="`${time}分钟后`" size="36" fontWeight="500" color="#465CFF"></fui-text>
|
||
<fui-text text="送达" size="36" fontWeight="500"></fui-text>
|
||
</view>
|
||
<fui-text :text="`距你还有${distance}，由FirstUI专送配送`" size="24" color="#7F7F7F"
|
||
:padding="['12rpx',0,'24rpx']">
|
||
</fui-text>
|
||
<fui-list>
|
||
<view class="fui-tel__box">
|
||
<view class="fui-tel__item">
|
||
<fui-lazyload src="/static/images/layout/icon_tel_3x.png" background="transparent"
|
||
width="26" height="26"></fui-lazyload>
|
||
<fui-text text="联系商家" size="26" :padding="[0,0,0,'16rpx']"></fui-text>
|
||
</view>
|
||
<view class="fui-tel__item">
|
||
<fui-lazyload block src="/static/images/layout/icon_tel_3x.png" background="transparent"
|
||
width="26" height="26"></fui-lazyload>
|
||
<fui-text text="联系骑手" size="26" :padding="[0,0,0,'16rpx']"></fui-text>
|
||
</view>
|
||
</view>
|
||
</fui-list>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
//需要自行申请key：https://lbs.qq.com
|
||
//小程序平台引入sdk请在后台添加request域名 https://apis.map.qq.com
|
||
//H5端使用，需添加域名白名单
|
||
import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'
|
||
const key = 'I4OBZ-YWVWU-MENVE-4Z3TZ-GEAJT-IWBX3';
|
||
const map = new QQMapWX({
|
||
key
|
||
});
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: 22.616917615026814,
|
||
longitude: 114.02557368550984,
|
||
mapHeight: 0,
|
||
markers: [{
|
||
iconPath: "/static/images/layout/img_rider_3x.png",
|
||
id: 1,
|
||
latitude: 22.611359108097293,
|
||
longitude: 114.03014980402233,
|
||
width: 48,
|
||
height: 48
|
||
}],
|
||
circles: [{
|
||
latitude: 22.616917615026814,
|
||
longitude: 114.02557368550984,
|
||
color: '#00AE8F11',
|
||
fillColor: '#00AE8F30',
|
||
radius: 200
|
||
|
||
}, {
|
||
latitude: 22.616917615026814,
|
||
longitude: 114.02557368550984,
|
||
color: '#FFFFFF',
|
||
fillColor: '#FFFFFF',
|
||
radius: 60
|
||
}, {
|
||
latitude: 22.616917615026814,
|
||
longitude: 114.02557368550984,
|
||
color: '#00AE8F',
|
||
fillColor: '#00AE8F',
|
||
radius: 24
|
||
}],
|
||
polyline: [],
|
||
distance: 0,
|
||
time: 0
|
||
}
|
||
},
|
||
onLoad() {
|
||
const sys = uni.getSystemInfoSync()
|
||
this.mapHeight = sys.windowHeight - uni.upx2px(300)
|
||
},
|
||
onReady() {
|
||
setTimeout(() => {
|
||
this.getPolyline()
|
||
}, 50)
|
||
},
|
||
methods: {
|
||
// #ifdef H5
|
||
jsonp: function(url, callback, callbackname) {
|
||
window[callbackname] = callback;
|
||
let script = document.createElement("script");
|
||
script.src = url;
|
||
script.type = "text/javascript";
|
||
document.head.appendChild(script);
|
||
document.head.removeChild(script);
|
||
},
|
||
// #endif
|
||
getDirection(routes) {
|
||
let coors = routes.polyline,
|
||
pl = [];
|
||
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
|
||
let 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.markers[0].latitude = pl[0].latitude
|
||
this.markers[0].longitude = pl[0].longitude
|
||
this.polyline = [{
|
||
points: pl,
|
||
color: '#00AE8F',
|
||
width: 4
|
||
}]
|
||
//距离
|
||
this.distance = routes.distance<1000?`${routes.distance}m`:`${(routes.distance/1000).toFixed(1)}km`;
|
||
//时间分钟
|
||
this.time = routes.duration;
|
||
},
|
||
getPolyline() {
|
||
/*
|
||
uni.getLocation({
|
||
// #ifdef APP-PLUS || MP
|
||
type: 'gcj02',
|
||
// #endif
|
||
// altitude: true,
|
||
success: (res) => {
|
||
// this.longitude = res.longitude;
|
||
// this.latitude = res.latitude;
|
||
},
|
||
fail(err) {
|
||
console.log(err)
|
||
}
|
||
})
|
||
*/
|
||
|
||
// 骑手位置，可从后端获取，或上一页面传入
|
||
const from = {
|
||
latitude: this.markers[0].latitude,
|
||
longitude: this.markers[0].longitude
|
||
}
|
||
//我的位置，正式环境使用上方注释代码获取当前位置
|
||
const to = {
|
||
// latitude: res.latitude,
|
||
// longitude: res.longitude
|
||
latitude: this.circles[0].latitude,
|
||
longitude: this.circles[0].longitude
|
||
}
|
||
// #ifndef H5
|
||
map.direction({
|
||
//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行）
|
||
mode: 'bicycling',
|
||
from: from,
|
||
to: to,
|
||
success: (res) => {
|
||
console.log(res);
|
||
if (res.result && res.result.routes && res.result.routes[0]) {
|
||
this.getDirection(res.result.routes[0])
|
||
}
|
||
},
|
||
fail: (error) => {
|
||
console.error(error);
|
||
}
|
||
})
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
const link =
|
||
`https://apis.map.qq.com/ws/direction/v1/bicycling?output=jsonp&key=${key}&to=${to.latitude},${to.longitude}&from=${from.latitude},${from.longitude}`;
|
||
this.jsonp(link,
|
||
res => {
|
||
if (res.result && res.result.routes && res.result.routes[0]) {
|
||
this.getDirection(res.result.routes[0])
|
||
}
|
||
},
|
||
'QQmap');
|
||
// #endif
|
||
|
||
//===================
|
||
},
|
||
back(){
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.fui-map {
|
||
width: 750rpx;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.fui-icon__back {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: fixed;
|
||
top: 72rpx;
|
||
left: 30rpx;
|
||
}
|
||
|
||
.fui-content__box {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.fui-content__inner {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
/* #endif */
|
||
background-color: #fff;
|
||
padding: 24rpx 24rpx 0;
|
||
border-radius: 16rpx;
|
||
height: 232rpx;
|
||
}
|
||
|
||
.fui-content__title {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fui-tel__box {
|
||
/* #ifndef APP-NVUE */
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.fui-tel__item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-right: 48rpx;
|
||
height: 96rpx;
|
||
/* #ifdef H5 */
|
||
cursor: pointer;
|
||
/* #endif */
|
||
}
|
||
</style>
|