前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序物流详情展示的实现

小程序物流详情展示的实现

作者头像
lzugis
发布2021-09-10 11:02:56
6260
发布2021-09-10 11:02:56
举报

概述

在日常生活中,我们会很方便的用小程序查看实时的物流详情,本文通过高德API模拟物流的路径数据,实现小程序中物流详情的展示。

效果

3.png
3.png

准备

因为需要调用高德的API,所以需要先将https://restapi.amap.com添加到小程序的request合法域名里面。

image.png
image.png

实现

代码语言:javascript
复制
<template>
	<view class="content">
		<view class="map-box">
			<map 
				class="map" 
				:latitude="latitude" 
				:longitude="longitude" 
				:scale="scale"
				:polyline="polyline"
				:markers="markers"
				:enable-poi="true"/>
		</view>
		<view class="header">物流详情</view>
		<view class="details">
			<view v-for="(item, index) of routers" :key="index" class="route">
				<view class="route-label" :class="[getClass(index)]">
					{{ getLabel(index) }}
				</view>
				{{ item.instruction }}
			</view>
		</view>
	</view>
</template>

<script>
	import axios from '@/utils/request.js'
	
	export default {
		components: {},
		data() {
			return {
				latitude: 37.1612,
				longitude: 103.081163,
				scale: 5,
				polyline: [],
				routers: [],
				markers: []
			}
		},
		onLoad(options) {
			this.getPathInfo()
		},
		onShareAppMessage: function () {},
		watch: {},
		methods: {
			getLabel(index) {
				let label = '运输中'
				if(index === 0) label = '结束'
				if(index === this.routers.length - 1) label = '开始'
				return label
			},
			getClass(index) {
				let cls = 'ing'
				if(index === 0) cls = 'end'
				if(index === this.routers.length - 1) cls = 'start'
				return cls
			},
			getPathInfo() {
				const url = 'https://restapi.amap.com/v3/direction/driving?key=您的key&origin=116.4734,40.1136&destination=113.4467,23.2546&originid=&destinationid=&extensions=base&strategy=0&waypoints=&avoidpolygons=&avoidroad='
				uni.showLoading({
				  title: '信息获取中...'
				});
				axios(url).then(res => {
					res = res.route.paths[0].steps;
					this.routers = res.concat([]).reverse()
					let lon = 0, lat = 0;
					res.forEach((step) => {
						const points = step.polyline.split(';')
						let _points = []
						points.forEach(p => {
							p = p.split(',').map(Number)
							_points.push({
								latitude: p[1], 
								longitude: p[0]
							})
							
							lon = p[0]
							lat = p[1]
						})
						this.polyline.push({
							points: _points,
							color: '#ff0000',
							width: 3,
							level: 99
						})
					})
					this.markers.push({
						id: 1,
						iconPath: '../../static/icon/car.png',
						latitude: lat,
						longitude: lon,
						width: 35,
						height: 35
					})
				})
				setTimeout(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 1rem;
	}
	.header {
		font-size: 1rem;
		font-weight: bold;
		text-align: left;
		border-left: 0.3rem solid #1AAD19;
		padding-left: 0.5rem;
		width: 100%;
		margin: 1rem;
	}
	.map-box,
  .map {
		background-color: white;
		width: 100vh;
		height: 80vh;
		margin: 0;
		padding: 0;
	}
	.details {
		position: relative;
		overflow: hidden;
		margin: 0.5rem 0;
	}
	.details:before {
		position: absolute;
		width: 0.2rem;
		height: 100%;
		background-color: #cc0003;
		content: " ";
		border: 0.1rem;
		left: 4rem;
	}
	.route {
		line-height: 1.5rem;
		padding-left: 4.7rem;
		margin-top: 1.5rem;
		position: relative;
		padding-bottom: 1rem;
	}
	.route-label {
		position: absolute;
		left: -0.8rem;
		top: 0;
		width: 4rem;
		text-align: right;
	}
	
	.route-label.ing {
		color: #bbbbbb;
	}
	.route-label.start {
		color: #cc0003;
		font-weight: bold;
	}
	.route-label.end {
		color: #519f1d;
		font-weight: bold;
	}
	.route:before {
		position: absolute;
		width: 0.2rem;
		height: 0.2rem;
		background-color: #ffffff;
		content: " ";
		border: 0.15rem solid #cc0003;
		border-radius: 100%;
		left: 3.8rem;
		top: 0.4rem;
	}
</style>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-06-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 准备
  • 实现
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档