uniapp实现轨迹回放

原创

已于 2023-10-08 10:37:58 修改 · 2.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #servlet #html

于 2023-04-11 11:25:53 首次发布

该代码示例展示了如何在微信小程序中创建一个轨迹回放功能，包括顶部的轨迹选择列表和地图上的轨迹移动。用户可以选择不同的轨迹，地图会显示选定的轨迹并模拟移动。同时，提供了开始和暂停按钮控制轨迹回放的动态效果。

<template>
	<view>
		<!--顶部轨迹-->
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
			<view class="topbox">
				<view class="locusnum" :class="{'selectlocusnum' : rSelect.indexOf(index)!=-1}"
					v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">
					{
  
  {value.name}}
				</view>
			</view>
		</scroll-view>

		<!--轨迹地图-->
		<view class="mapbox">
			<map class="mapstyle" id="myMap" :polyline="polyline" :markers="markers"
				v-if="polyline[0].points.length > 0" :latitude="polyline[0].points[0].latitude"
				:longitude="polyline[0].points[0].longitude" :include-points="polyline[0].points">
				<view class="map-floatA">共计3段轨迹</view>
				<view class="map-floatB">2022/09/28</view>
			</map>

		</view>
		<view class="hcp-bottom">
			<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
			<button v-else @click="handleStartMove()">开始移动</button>
		</view>

		<!--底部盒子-->
		<view class="bottomBox">

			<view class="oneTier">
				<view class="placeBox">
					<view class="twig">
						<view class="tag">起</view>
						<view class="taginfo">江门豪爵研发中心</view>
					</view>
					<view class="twig">
						<view class="tag">终</view>
						<view class="taginfo">席帽山森林公园</view>
					</view>
				</view>
				<view class="rideBox">
					<text class="ride-mileage">骑行里程/</text>
					<view class="ride-text">
						<text class="ride-textA">25.9</text>
						<text class="ride-textB">km</text>
					</view>
				</view>
			</view>

			<view class="num-storey">
				<view class="ride-numbox"

最低0.47元/天解锁文章