利用uniapp自带的map组件,实现小程序的轨迹回放。
附上效果图
轨迹回放
完整代码附上,
<template>
<view class="pageBox">
<view class="video">
<map id="myMap" style="width: 100%; height: 100vh;position: relative;" :latitude="latitude"
:longitude="longitude" :scale="mapscale" :markers="markers" :enable-3D="true"
:enable-satellite='weiXing' :show-location="true" @tap="mapTap" :polyline="polyline"
@loaded="onMapLoaded">
</map>
</view>
</view>
</template>
<script>
import {
historyList
} from '@/Api/setApi.js'
export default {
data() {
return {
equipmentId: '',
title: 'map',
latitude: 0,
longitude: 0,
mapscale: 14,
markers: [{
id: 1,
latitude: 0,
longitude: 0,
iconPath: '/static/imgs/che.png',
width: 20,
height: 20,
callout: {
display: 'ALWAYS',
}
},
{
id: 2,
latitude: 30.125712999999983,
longitude: 104.138703000,
iconPath: '/static/imgs/che.png',
width: 20,
height: 20,
},
],
polyline: [{
points: [{
latitude: 0,
longitude: 0
}, {
latitude: 34.37290581917907,
longitude: 108.9089576622622