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> |