uniapp 小程序使用腾讯地图 模拟规划路线
2022/3/26 17:22:41
本文主要是介绍uniapp 小程序使用腾讯地图 模拟规划路线，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<template>
<view class="deliver-wrap">
<uni-nav-bar color="#fff" style="width: 100vw" statusBar="true"
backgroundColor="linear-gradient(84.77deg, #69A9F8 26.48%, #3560DD 81.11%)" title="交付单详情">
<view slot="left">
<uni-icons type="arrowleft" size="24" color="#fff" @click="goBack"></uni-icons>
</view>
</uni-nav-bar>
<map id="map" class="map-wrap" style="width: 100%; height: 80vh;" :latitude="startLat2" :longitude="startLng2"
:polyline="polyline" :markers="marker" :scale="scale"></map>
<scroll-view :class="isLess10 ? '':'less10'" :style="'height:' + scrollViewHeight + ';'" class="scroll-v"
enableBackToTop="true" scroll-y :scroll-top="scrollTop"
@scroll="scrollChange">
<view@click="toProcess" class="center-card">
<deliver-card :item="item" width="730rpx"></deliver-card>
</view>
<view class="components-wrap">
<view class="top-wrap">
<view class="left">
货单构件列表
</view>
<view class="right">
共计{{outboundVolumeBlock}}块，{{outboundVolumeBlock/1000}}m³，{{outboundVolumeBlock/1000}}T
</view>
</view>
<view class="lis">
<block v-for="(component,componentIndex) in componentList" :key="componentIndex">
<view @click="itemClickHandler(component.id)" class="component-item">
<view class="line1">
{{component.model}}
</view>
<view class="line2 common-line">
<view class="left">
<text>{{component.typeLabel}}</text>
<text>
<text v-if="component.building">{{component.building}}#</text>
<text v-if="component.floor">-{{component.floor}}F</text>
</text>
</view>
<view class="right">
<text>已发车</text>
<image src="../../static/images/map/right.png" mode=""></image>
</view>
</view>
<view class="line3 common-line">
{{item.projectName}}
</view>
<view class="line4 common-line">
{{component.code}}
</view>
</view>
</block>
<block v-for="(itemEmpty,emptyIndex) in emptyList" :key="emptyIndex">
<view style="height: 400rpx;"></view>
</block>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import deliverCard from '../components/deliverCard.vue'
import {deliverDetailApi} from "@/api/deliver.js"
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
// 实例化API核心类 NTVBZ-BSM6X-4QM4N-TFCRL-VM4UT-WVB5F
// EG2BZ-7VRKJ-5WXFI-FYSF5-WA56T-34FD7
var qqmapsdk = new QQMapWX({
key: 'NTVBZ-BSM6X-4QM4N-TFCRL-VM4UT-WVB5F'
});
export default {
name: "Profile",
components: {
deliverCard
},
data() {
return {
outboundVolumeArea: 0,
outboundVolumeBlock:0,
outboundVolumeWeight:0,
componentList:[],
emptyList:[],
item:{},
list:[],
allData:{},
id:null,
isLess10: false,
scrollViewHeight: "calc(100vh - 200rpx)",
scrollViewHeightCopy: "calc(100vh - 200rpx)",
loading: false, //控制接口的请求
freshing: false, //控制下拉刷新
scrollTop: 0,
// 已发出时间
departureTime: 0, //分钟
startLat: 39.909,
startLng: 116.39742,
startLat2: 39.909,
startLng2: 116.39742,
destLat: 40.013,
destLng: 118.685,
marker: [],
polyline: [],
scale: 12, //地图缩放程度
};
},
onLoad(options) {
this.item = JSON.parse(options.item)
this.id = this.item.id
this.getData()
},
onShareAppMessage() {
return {
title: "交付单运输中，点击查看详情，联系司机",
path: "/otherPages/pages/deliverDetail"
};
},
mounted() {
uni.getSystemInfo({
success: (resu) => {
const query = uni.createSelectorQuery();
query.select(".scroll-v").boundingClientRect();
query.exec((res) => {
this.scrollViewHeight =
`calc(${resu.windowHeight}px - ${res[0].top}px - 26px)`;
this.scrollViewHeightCopy =
`calc(${resu.windowHeight}px - ${res[0].top}px - 26px)`;
});
},
fail: (res) => {},
});
},
methods: {
itemClickHandler(id) {
let projectId = this.allData.projectId
uni.navigateTo({
url: `./componentDetail?id=${id}&projectId=${projectId}`,
});
},
initMap(){
const that = this;
qqmapsdk.direction({
mode: 'driving', //可选值：'driving'（驾车） trucking 货车
//from参数不填默认当前地址
// latitude纬度 longitude 经度
from: {
latitude: that.startLat,
longitude: that.startLng
},
to: {
latitude: that.destLat,
longitude: that.destLng
},
size: 4, // 车型 1: 微型车 2: 轻型车 3: 中型车 4: 重型车
policy: 'LEAST_TIME', //'9', //参考实时路况，高速优先，尽量躲避拥堵
height: 4,
width: 2.5,
length: 13,
weight: 6.8,
axle_weight: 34,
axle_count: 6,
is_trailer: 1,
success: function(res, data) {
that.setMarks()
// distance number 是 方案总距离，单位：米
// duration number 是 方案估算时间（含路况），单位：分钟
//计算缩放比例
let distance = data[0].distance / 1000;
console.log(distance);
if (distance > 500) {
var scale = 7;
} else if (distance > 200) {
var scale = 10;
} else if (distance > 100) {
var scale = 12;
} else {
var scale = 15;
}
var ret = res;
var coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var 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]
})
}
const time = data[0].duration - that.departureTime;
if (time < 1) {
that.vehicle(pl[pl.length-2])
} else {
// time
let length = pl.length -1 ;
let durationPercent = Math.round(length*that.getPercent(that.departureTime, data[0].duration ));
durationPercent = durationPercent > length ? length : durationPercent;
that.vehicle(pl[durationPercent])
}
that.polyline = [{
points: pl,
color: '#4AC37A',
width: 5
}]
that.scale = scale;
},
fail: function(error) {
uni.showToast({
title: error.message,
duration: 3000,
icon: "none",
});
}
})
},
setMarks(){
this.marker.push({
latitude: this.startLat,
longitude: this.startLng,
iconPath: '../../static/images/map/send.png',
width: 20,
height: 20
}, {
latitude: this.destLat,
longitude: this.destLng,
width: 20,
height: 20,
iconPath: '../../static/images/map/receive.png'
})
},
toProcess(){
let processList = []
if(this.allData.deliveryTime && this.allData.deliveryOperator){
processList.push({
name:'确认送达',
time:this.allData.deliveryTime,
person:this.allData.deliveryOperator
})
}
if(this.allData.departureTime && this.allData.departureOperator){
processList.push({
name:'确认发车',
time:this.allData.departureTime,
person:this.allData.departureOperator
})
}
if(this.allData.loadTime && this.allData.loader){
processList.push({
name:'装车',
time:this.allData.loadTime,
person:this.allData.loader
})
}
if(this.allData.createTime && this.allData.creator){
processList.push({
name:'制单',
time:this.allData.createTime,
person:this.allData.creator
})
}
uni.navigateTo({
url:"./componentProcess?list="+JSON.stringify(processList)
})
},
getData(){
deliverDetailApi(this.id).then(res=>{
this.allData = res.data.data
this.componentList = res.data.data.componentList || []
this.outboundVolumeArea = res.data.data.outboundVolumeArea
this.outboundVolumeBlock = res.data.data.outboundVolumeBlock
this.outboundVolumeWeight = res.data.data.outboundVolumeWeight
this.emptyList = []
if(this.componentList.length < 4){
let l = 4 - this.componentList.length
for(let i=0;i<l;i+=1){
this.emptyList.push({})
}
}
// 运输中
this.departureTime = this.getTimeDistance(this.allData.departureTime)
// 起点
let factoryLocation = res.data.data.factoryLocation
this.startLat = factoryLocation.split(',')[1]
this.startLng = factoryLocation.split(',')[0]
// 终点
let addressLocation = res.data.data.addressLocation
if(addressLocation.split(',').length === 2){
this.destLat = addressLocation.split(',')[1]
this.destLng = addressLocation.split(',')[0]
}else{
uni.showToast({
title:"项目地点经纬度异常",
icon:'none',
duration:3000
})
setTimeout(()=>{
uni.navigateBack()
},3000)
}
}).then(()=>{
this.initMap()
})
},
getTimeDistance(startTime){
console.log(startTime)
if(!startTime){
return 0
}
var date1= startTime; //开始时间
var date2 = new Date(); //结束时间
var date3 = date2.getTime() - new Date(date1).getTime(); //时间差的毫秒数
if(date3<0){
return 0
}
//计算出相差天数
var days=Math.floor(date3/(24*3600*1000))
//计算出小时数
var leave1=date3%(24*3600*1000) //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000))
//计算相差分钟数
var leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000))
return days*24*60 + hours*60 + minutes
},
goBack() {
uni.navigateBack()
},
scrollChange(e) {
let top = e.detail.scrollTop
if (top < 10) {
this.isLess10 = true
this.scrollViewHeight = '90vh'
} else {
this.scrollViewHeight = this.scrollViewHeightCopy
this.isLess10 = false
}
},
vehicle(pl) {
console.log(pl)
this.startLat2 = pl.latitude
this.startLng2 = pl.longitude
if(this.item.status === 3){
this.marker.push({
latitude: pl.latitude,
longitude: pl.longitude,
iconPath: '../../static/images/map/vehicle.png',
width: 20,
height: 20,
label: { //为标记点旁边增加标签 //因背景颜色H5不支持
content: '已出发' + this.departureTime + '分钟',
textAlign: 'left',
fontSize: 14,
height:'22px',
padding:'8px',
bgColor: '#5984FE',
borderRadius:'4px',
color: '#FFF',
// label 位置
anchorX: 40,
anchorY: -40,
}
})
}
},
getPercent(num, total) {
num = parseFloat(num);
total = parseFloat(total);
console.log(num, total)
if (isNaN(num) || isNaN(total)) {
return 0;
}
return total <= 0 ? 0 : Math.round(num / total );
}
},
};
</script>
<style lang="scss" scoped>
.map-wrap {
position: fixed;
z-index: 1;
}
.scroll-v {
position: relative;
margin-top: 550rpx;
z-index: 9999;
transition: all 0.5s;
background: linear-gradient(180deg, rgba(246, 247, 250, 0) 0%, #F6F7FA 36.47%);
border-radius: 24rpx;
&.less10 {
margin-top: 160rpx;
}
}
.scroll-v::before{
content: "";
position: absolute;
top: -86rpx;
left: 0;
width: 453rpx;
height: 62rpx;
background-image: url("../../static/images/map/tip.png");
background-size: 453rpx 62rpx;
z-index: 99999;
}
.components-wrap {
background: #FAFBFD;
border-radius: 24rpx;
width: 730rpx;
box-sizing: border-box;
margin: 24rpx auto;
overflow: hidden;
.top-wrap {
height: 93rpx;
line-height: 93rpx;
padding: 0 24rpx;
display: flex;
justify-content: space-between;
align-content: center;
.left {
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.right {
font-size: 24rpx;
color: #666666;
}
}
.lis {
background-color: #fff;
.component-item+.component-item::before {
content: "";
height: 2rpx;
background-color: #E5E5E5;
position: absolute;
width: 682rpx;
left: 24rpx;
top: 0rpx;
transform: scaleY(0.5);
}
.component-item {
position: relative;
padding: 24rpx;
box-sizing: border-box;
.line1 {
font-size: 32rpx;
color: #333;
line-height: 45rpx;
}
.line2 {
display: flex;
justify-content: space-between;
align-content: center;
.right {
display: flex;
justify-content: center;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
}
}
}
.common-line {
margin-top: 8rpx;
line-height: 39rpx;
color: #777777;
font-size: 26rpx;
}
}
}
}
</style>
<style>
page {
background: linear-gradient(180deg, rgba(246, 247, 250, 0) 0%, #F6F7FA 36.47%);
}
</style>
这篇关于uniapp 小程序使用腾讯地图 模拟规划路线的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-13微信小程序如何封装接口域名？-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能？-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字？-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡？-icode9专业技术文章分享
- 2024-11-01微信小程序教程：零基础入门到实战
- 2024-11-01微信小程序全栈教程：从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view，支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度？-icode9专业技术文章分享
