311 lines
7.0 KiB
Vue
311 lines
7.0 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="map">
|
|||
|
|
<map id="map" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
|
|||
|
|
style="width:100%;height: 100%;" :latitude="latitude" :enable-scroll="false"
|
|||
|
|
:longitude="longitude"></map>
|
|||
|
|
</view>
|
|||
|
|
<button @click="getDriverLine">叫我按钮</button>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getDetil
|
|||
|
|
} from "@/api/logistics.js"
|
|||
|
|
import {
|
|||
|
|
takeGoods
|
|||
|
|
} from "@/api/logistics.js"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
showPop: false,
|
|||
|
|
goodsDetil: undefined,
|
|||
|
|
scale: 17,
|
|||
|
|
latitude: 28.908854,
|
|||
|
|
longitude: 105.43639400000002,
|
|||
|
|
markers: [],
|
|||
|
|
polyline: [],
|
|||
|
|
// https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg
|
|||
|
|
// https://t9.baidu.com/it/u=414099140,1072313909&fm=193
|
|||
|
|
// mark: [{
|
|||
|
|
// id: 0,
|
|||
|
|
// latitude: 28.908854,
|
|||
|
|
// longitude: 105.43639400000002,
|
|||
|
|
// iconPath: 'https://img2.baidu.com/it/u=3116155797,2219949885&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //显示的图标
|
|||
|
|
|
|||
|
|
// width: 40, //宽
|
|||
|
|
// height: 40, //高
|
|||
|
|
// title: '我在这里', //标注点名
|
|||
|
|
// alpha: 0.5, //透明度
|
|||
|
|
// callout: { //自定义标记点上方的气泡窗口 点击有效
|
|||
|
|
// content: '我的位置', //文本
|
|||
|
|
// color: '#ffffff', //文字颜色
|
|||
|
|
// fontSize: 14, //文本大小
|
|||
|
|
// borderRadius: 15, //边框圆角
|
|||
|
|
// borderWidth: '10',
|
|||
|
|
// bgColor: '#3274F9', //背景颜色
|
|||
|
|
// display: 'ALWAYS', //常显
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// id: 2,
|
|||
|
|
|
|||
|
|
// latitude: 28.908447, //纬度
|
|||
|
|
// longitude: 105.439304,
|
|||
|
|
// //经度
|
|||
|
|
// iconPath: '../../static/img/contract/company.png', //显示的图标
|
|||
|
|
// rotate: 0, // 旋转度数
|
|||
|
|
// width: 20, //宽
|
|||
|
|
// height: 30, //高
|
|||
|
|
// alpha: 0.5, //透明度
|
|||
|
|
// callout: { //自定义标记点上方的气泡窗口 点击有效
|
|||
|
|
// content: '商家', //文本
|
|||
|
|
// color: 'white', //文字颜色
|
|||
|
|
// fontSize: 14, //文本大小
|
|||
|
|
// borderRadius: 15, //边框圆角
|
|||
|
|
// borderWidth: '10',
|
|||
|
|
// bgColor: '#3274F9', //背景颜色
|
|||
|
|
// display: 'ALWAYS', //常显
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// ],
|
|||
|
|
|
|||
|
|
// polyline: [{
|
|||
|
|
// points: [{
|
|||
|
|
// latitude: 28.908854,
|
|||
|
|
// longitude: 105.43639400000002,
|
|||
|
|
// }, {
|
|||
|
|
// latitude: 28.908447, //纬度
|
|||
|
|
// longitude: 105.439304,
|
|||
|
|
// }],
|
|||
|
|
// color: "#0091ff",
|
|||
|
|
// // dottedLine: true,
|
|||
|
|
// // colorList: true,
|
|||
|
|
// // dottedLine: true,
|
|||
|
|
// width: 15,
|
|||
|
|
// // arrowLine: true,
|
|||
|
|
// // colorList: true,
|
|||
|
|
// // colorList: true
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// ]
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
confirm() {
|
|||
|
|
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
|||
|
|
takeGoods({
|
|||
|
|
user_id: id,
|
|||
|
|
logistics_id: this.goodsDetil.logistics.id
|
|||
|
|
})
|
|||
|
|
this.showPop = false
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
地图相关
|
|||
|
|
*/
|
|||
|
|
// 路线规划
|
|||
|
|
getDriverLine() {
|
|||
|
|
const that = this;
|
|||
|
|
const key = "997c9a3d88154fa78f4d28bebc1dd84f";
|
|||
|
|
//起点坐标
|
|||
|
|
const origin = "105.43639400000002,28.908854";
|
|||
|
|
//给起点坐标一个图标
|
|||
|
|
this.startingPoint()
|
|||
|
|
//给终点坐标一个图标
|
|||
|
|
this.endPoint()
|
|||
|
|
//终点坐标
|
|||
|
|
const destination = "105.439304,28.908447";
|
|||
|
|
uni.request({
|
|||
|
|
// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
|
|||
|
|
url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=${origin}&destination=${destination}`,
|
|||
|
|
success: (res) => {
|
|||
|
|
const data = res.data.data;
|
|||
|
|
var points = [];
|
|||
|
|
if (data.paths && data.paths[0] && data.paths[0].steps) {
|
|||
|
|
var steps = data.paths[0].steps;
|
|||
|
|
for (var i = 0; i < steps.length; i++) {
|
|||
|
|
//将每一步的数据放到points数组中
|
|||
|
|
var poLen = steps[i].polyline.split(";");
|
|||
|
|
for (var j = 0; j < poLen.length; j++) {
|
|||
|
|
points.push({
|
|||
|
|
longitude: parseFloat(poLen[j].split(",")[0]),
|
|||
|
|
latitude: parseFloat(poLen[j].split(",")[1]),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log(data.paths[0].steps[0].instruction)
|
|||
|
|
that.runningRoute = data.paths[0].steps[0].instruction;
|
|||
|
|
console.log('行驶路线-----------', that.runningRoute)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
that.polyline = [{
|
|||
|
|
points: points,
|
|||
|
|
color: "#0091ff",
|
|||
|
|
dottedLine: true,
|
|||
|
|
width: 15,
|
|||
|
|
arrowLine: true,
|
|||
|
|
colorList: true,
|
|||
|
|
}, ];
|
|||
|
|
},
|
|||
|
|
fail: function(res) {
|
|||
|
|
console.log("获取路线失败", res);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 规划路线的时候给起点一个marker，
|
|||
|
|
startingPoint() {
|
|||
|
|
let point = [{
|
|||
|
|
id: 1,
|
|||
|
|
width: 40,
|
|||
|
|
height: 40,
|
|||
|
|
latitude: 28.908854,
|
|||
|
|
longitude: 105.43639400000002,
|
|||
|
|
iconPath: "https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg",
|
|||
|
|
anchor: {
|
|||
|
|
x: 0.5,
|
|||
|
|
y: 1,
|
|||
|
|
},
|
|||
|
|
}, ];
|
|||
|
|
this.markers = this.markers.concat(point);
|
|||
|
|
},
|
|||
|
|
// 规划路线的时候给终点一个marker，
|
|||
|
|
endPoint() {
|
|||
|
|
let point = [{
|
|||
|
|
id: 2,
|
|||
|
|
width: 40,
|
|||
|
|
height: 40,
|
|||
|
|
latitude: 28.908447, //纬度
|
|||
|
|
longitude: 105.439304,
|
|||
|
|
//经度
|
|||
|
|
iconPath: 'https://t9.baidu.com/it/u=414099140,1072313909&fm=193',
|
|||
|
|
anchor: {
|
|||
|
|
x: 0.5,
|
|||
|
|
y: 1,
|
|||
|
|
},
|
|||
|
|
}, ];
|
|||
|
|
this.markers = this.markers.concat(point);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 地图结束
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
// getDetil({
|
|||
|
|
// logistics_id: options.id
|
|||
|
|
// }).then(res => {
|
|||
|
|
// this.goodsDetil = res.data
|
|||
|
|
// console.log(this.goodsDetil)
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
// onShow() {
|
|||
|
|
// let that = this
|
|||
|
|
// // uni.getLocation({
|
|||
|
|
// // type: 'wgs84',
|
|||
|
|
// // success: function(res) {
|
|||
|
|
// // that.mark[0].latitude = res.latitude
|
|||
|
|
// // that.mark[0].longitude = res.longitude
|
|||
|
|
// // console.log(that.mark[0])
|
|||
|
|
// // console.log(res)
|
|||
|
|
|
|||
|
|
// // }
|
|||
|
|
// // });
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='scss' scoped>
|
|||
|
|
.map {
|
|||
|
|
height: 40vh;
|
|||
|
|
width: 100vw;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-style {
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: red;
|
|||
|
|
border: none;
|
|||
|
|
color: white;
|
|||
|
|
height: 90rpx;
|
|||
|
|
line-height: 90rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order_info {
|
|||
|
|
height: auto;
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 6vw 6vw 0 0;
|
|||
|
|
transform: translateY(-5vh);
|
|||
|
|
padding: 5vh 3vw;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.tit {
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 35rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tit_a {
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 35rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total {
|
|||
|
|
text-align: right;
|
|||
|
|
color: #3274F9;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store_name {
|
|||
|
|
color: #999999;
|
|||
|
|
margin: 18rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store_time {
|
|||
|
|
color: #999999;
|
|||
|
|
padding: 0 0 20rpx 0;
|
|||
|
|
border-bottom: 1px solid #999999;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
margin: 10rpx 0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pro_info {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods_tit {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
display: block;
|
|||
|
|
transform: rotate(90deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|