uniapp--腾讯地图路线轨迹回放

最新推荐文章于 2024-10-25 16:38:53 发布

前端志茗

最新推荐文章于 2024-10-25 16:38:53 发布

阅读量1k

点赞数 1

文章标签： uni-app json 前端微信小程序小程序

本文链接：https://blog.csdn.net/qq_56745273/article/details/130459706

版权

该代码示例展示了如何在微信小程序中使用腾讯地图SDK来实现实时路线轨迹回放功能。用户可以手动选择起点和终点，进行驾车路线规划，并通过小车图标模拟运行轨迹。代码包括地图初始化、获取用户位置、添加标记点、绘制路线以及小车移动动画等关键步骤。

摘要由CSDN通过智能技术生成

腾讯地图路线轨迹回放

<template>
	<div>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">路线轨迹</block>
		</cu-custom>
		<view class="notice">
			<u-notice-bar :text="text"></u-notice-bar>
		</view>
		<view class="map-container">
			<map id="map" class="map" :latitude="latitude" :longitude="longitude" :show-location="false" :markers="covers" :polyline="polyline"></map>
		</view>
		<view class="btn">
			<button type="primary" size="mini" @click="selectionLocation">手动选择目的地</button>
			<button type="warn" size="mini" @click="routePlanning">开始驾车路线规划</button>
			<button type="primary" size="mini" @click="carshow">显示小车</button>
			<button type="primary" size="mini" @click="routerTrack">轨迹模拟运行</button>
		</view>
	</div>
</template>

<script>
	// 引入SDK核心类，地图组件
	import QQMapWX from '../components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	export default{
   
		data(){
   
			return{
   
				qqmapsdk:{
   },  // 腾讯地图小程序的SDK
				text: '路线轨迹，带小车图标',  // 滚动通知
				latitude: '',  // 纬度
				longitude: '',  // 经度
				covers:[],  // 地图上面的标记点
				form:{
     // 初始地
					latitu