uniapp地图轨迹回放

最新推荐文章于 2025-01-15 15:52:05 发布

原创

最新推荐文章于 2025-01-15 15:52:05 发布 · 4.3k 阅读

10 ·

CC 4.0 BY-SA版权

uniapp地图轨迹回放

欢迎使用ay-contrail插件

最近有需求为：在地图上展示一些点的轨迹，按时间先后顺序回放。已实现任意多点的轨迹回放，整理插件代码如下：

1.ay-contrail插件

可去uniapp插件市场的地图轨迹插件页面下载.

属性

属性	类型	说明
mapId	String	地图id，默认mapId_contrail
points	Array	轨迹数组
	longitude	Number 经度
	latitude	Number 纬度
scale	Number	缩放级别，取值范围为3-20，默认14
longitude	Number	当前位置经度
latitude	Number	当前位置纬度
satellite	Boolean	是否开启卫星图，默认开启

下面是插件的 代码片.

<template>
	<view>
		<map :id="mapId" :longitude="longitude" :latitude="latitude" :scale="scale" :markers="markers" :polyline="polyline"
		 :enable-satellite="satellite" show-location style="width: 100%; height: 100vh;"
		 @markertap="tapMarker"></map>
	</view>
</template>

<script>
	export default {
   
   
		components: {
   
   

		},
		props: {
   
   
			mapId: {
   
   
				type: String,
				default: 'mapId_contrail'
			},
			points: {
   
   
				type: Array,
				default () {
   
   
					return []
				}
			},
			scale: {
   
   
				type: Number,
				default: 14
			},
			latitude: {
   
   
				type: Number,
				default: 39.806466
			},
			longitude: {
   
   
				type: Number,
				default: 98.226473
			},
			//是否开启卫星图
			satellite: {
   
   
				type: Boolean,
				default: true
			},
		},
		data() {
   
   
			return {
   
   
				i: 0, // 用于循环
				markers: [], // 标记点集合
				polyline: [], // 坐标点集合
				mapCtx : {
   
   },
			}
		},
		mounted:function()