<template>
|
<view>
|
<view class="page-body"
|
style="margin-top: 4rpx;">
|
<view class="page-section page-section-gap">
|
<map style="width: 100%; height: 600px;"
|
:latitude="latitude"
|
:longitude="longitude"
|
:markers="markers"
|
:polyline="polyline"
|
@markertap="awaken"
|
@callouttap="awaken"
|
@tap="awaken"></map>
|
</view>
|
</view>
|
<view class="tip">
|
<view class="first">
|
通行距离
|
<text>{{ distance || '' }}Km</text>
|
</view>
|
<view class="first">
|
预计到达时间
|
<text>{{ duration || '' }}</text>
|
</view>
|
</view>
|
<view class="open-button"
|
@click="awaken"><u-button type="primary">使用手机地图</u-button></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
latitude: 38.04606544104117,
|
longitude: 114.48735479816793,
|
customerId: '',
|
filedId: '',
|
orderType: '',
|
toFiledId: '',
|
// 起点经纬度
|
originlongitude: 39.909,
|
originlatitude: 116.39742,
|
// 终点
|
finishlongitude: null,
|
finishlatitude: null,
|
markers: [{
|
latitude: null,
|
longitude: null,
|
iconPath: 'https://wrzs.czjlchem.com:9090/appimg/image/banner/location.png',
|
width: 23,
|
height: 33,
|
id: 0,
|
callout: {
|
content: '起点', //文本
|
color: '#ffffff', //文字颜色
|
fontSize: 10, //文本大小
|
borderRadius: 12, //边框圆角
|
borderWidth: '10',
|
bgColor: '#08b078', //背景颜色
|
display: 'ALWAYS' //常显
|
}
|
},
|
{
|
latitude: null,
|
longitude: null,
|
iconPath: 'https://wrzs.czjlchem.com:9090/appimg/image/banner/location.png',
|
width: 23,
|
height: 33,
|
id: 1,
|
callout: {
|
content: '终点', //文本
|
color: '#ffffff', //文字颜色
|
fontSize: 10, //文本大小
|
borderRadius: 12, //边框圆角
|
borderWidth: '10',
|
bgColor: '#fc645c', //背景颜色
|
display: 'ALWAYS' //常显
|
}
|
}
|
],
|
polyline: [{
|
// 每个点的经纬度
|
points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, {
|
latitude: 38.049531,
|
longitude: 114.53521899999998
|
}],
|
// 颜色
|
color: '#0091ff',
|
// 宽度
|
width: 10
|
}],
|
distance: null,
|
duration: null,
|
fromLocation: {},
|
toLocation: {}
|
};
|
},
|
methods: {
|
getLocation() {
|
uni.showLoading({
|
title: '加载中’'
|
});
|
let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
|
let qqmapsdk = new QQMapWX({
|
key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 必填
|
});
|
const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : {
|
customerId: this
|
.customerId,
|
filedId: this.filedId
|
};
|
this.$reqGet('getAppLocation', params).then(result => {
|
console.log(result, '腾讯经纬度');
|
let _this = this;
|
console.log(_this.orderType, '类型');
|
let fromLocation;
|
let toLocation;
|
if (_this.orderType == '外购' || _this.orderType == '外销') {
|
fromLocation = {
|
longitude: result.data.customerLongitude,
|
latitude: result.data.customerLatitude
|
};
|
toLocation = {
|
longitude: result.data.filedLongitude,
|
latitude: result.data.filedLatitude
|
};
|
}
|
// else if (_this.orderType == '内购' || _this.orderType == '内销') {
|
// fromLocation = {
|
// longitude: result.data.filedLongitude,
|
// latitude: result.data.filedLatitude
|
// };
|
// toLocation = {
|
// longitude: result.data.customerLongitude,
|
// latitude: result.data.customerLatitude
|
// };
|
// }
|
else {
|
fromLocation = {
|
longitude: result.data.filedLongitude,
|
latitude: result.data.filedLatitude
|
};
|
toLocation = {
|
longitude: result.data.toFiledLongitude,
|
latitude: result.data.toFiledLatitude
|
};
|
// _this.fromLocation = fromLocation;
|
// _this.toLocation = toLocation;
|
}
|
console.log(fromLocation, toLocation);
|
_this.fromLocation = fromLocation;
|
_this.toLocation = toLocation;
|
//调用距离计算接口
|
qqmapsdk.direction({
|
mode: 'driving',
|
//from参数不填默认当前地址
|
from: fromLocation,
|
to: toLocation,
|
success: function(res) {
|
console.log(res);
|
let ret = res;
|
let coors = ret.result.routes[0].polyline,
|
pl = [];
|
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
|
let kr = 1000000;
|
for (let i = 2; i < coors.length; i++) {
|
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
|
}
|
//将解压后的坐标放入点串数组pl中
|
for (let i = 0; i < coors.length; i += 2) {
|
pl.push({ latitude: coors[i], longitude: coors[i + 1] });
|
}
|
console.log(pl);
|
//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
|
_this.longitude = pl[0].longitude;
|
_this.latitude = pl[0].latitude;
|
_this.polyline = [{
|
points: pl,
|
color: '#04b474',
|
width: 4,
|
arrowLine: true
|
}];
|
if (_this.orderType == '外购' || _this.orderType == '外销') {
|
_this.$set(_this.markers[0], 'longitude', result.data
|
.customerLongitude);
|
_this.$set(_this.markers[0], 'latitude', result.data.customerLatitude);
|
_this.$set(_this.markers[1], 'longitude', result.data.filedLongitude);
|
_this.$set(_this.markers[1], 'latitude', result.data.filedLatitude);
|
}
|
// else if (_this.orderType == '内购' || _this.orderType == '内销') {
|
// _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
|
// _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
|
// _this.$set(_this.markers[1], 'longitude', result.data
|
// .customerLongitude);
|
// _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude);
|
// }
|
else {
|
_this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
|
_this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
|
_this.$set(_this.markers[1], 'longitude', result.data
|
.toFiledLongitude);
|
_this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
|
}
|
},
|
fail: function(error) {
|
console.error(error);
|
},
|
complete: function(res) {
|
console.log(res);
|
uni.hideLoading();
|
_this.distance = res.result.routes[0].distance;
|
_this.distance = (_this.distance / 1000).toFixed(2);
|
_this.duration = _this.handleTime(res.result.routes[0].duration);
|
}
|
});
|
});
|
},
|
//
|
handleTime(time) {
|
let now = new Date(); // 获取当前时间
|
now.setMinutes(now.getMinutes() + time);
|
let hours = now
|
.getHours()
|
.toString()
|
.padStart(2, '0');
|
let minutes = now
|
.getMinutes()
|
.toString()
|
.padStart(2, '0');
|
return hours + ':' + minutes;
|
},
|
// 唤醒
|
awaken() {
|
uni.openLocation({
|
latitude: this.markers[1].latitude,
|
longitude: this.markers[1].longitude,
|
name: '目的地',
|
address: '目的地'
|
});
|
}
|
},
|
onLoad(params) {
|
this.customerId = params.customerId;
|
this.filedId = params.filedId;
|
this.orderType = params.orderType;
|
if (params.toFiledId) {
|
this.toFiledId = params.toFiledId;
|
}
|
},
|
onShow() {
|
this.getLocation();
|
// this.awaken();
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
.tip {
|
width: 94%;
|
font-size: 40rpx;
|
margin: vww(22) auto;
|
display: flex;
|
justify-content: space-around;
|
|
.first {
|
color: #515151;
|
|
text {
|
font-size: 45rpx;
|
color: #f81414;
|
}
|
}
|
}
|
|
.open-button {
|
width: 100%;
|
margin: 40rpx 0;
|
display: flex;
|
justify-content: center;
|
|
/deep/.u-button {
|
width: 300rpx;
|
border: 1px solid #3b56eb;
|
border-radius: 37rpx 37rpx 37rpx 37rpx;
|
background-color: transparent;
|
color: #3b56eb;
|
}
|
}
|
</style>
|
