uniapp 地图轨迹回放

插件下载地址:https://ext.dcloud.net.cn/plugin?id=7622#detail

<view class="marker">
        <map id="map" style="width: 100vw; height: 100vh;" :scale="scale" :latitude="latitude" :longitude="longitude"
            :markers="markers" :polyline="polyline"></map>
</view>
const mapData = [{
            latitude: 34.259428,
            longitude: 108.947040,
            problem: false,
        },
        {
            latitude: 34.252918,
            longitude: 108.946963,
            problem: false,
        },
        {
            latitude: 34.252408,
            longitude: 108.946240,
            problem: false,
        },
        {
            latitude: 34.249286,
            longitude: 108.946184,
            problem: false,
        },
        {
            latitude: 34.248670,
            longitude: 108.946640,
            problem: false,
        },
        {
            latitude: 34.248129,
            longitude: 108.946826,
            problem: false,
        },
        {
            latitude: 34.243537,
            longitude: 108.946816,
            problem: true,
        },
        {
            latitude: 34.243478,
            longitude: 108.939003,
            problem: true,
        },
        {
            latitude: 34.241218,
            longitude: 108.939027,
            problem: true,
        },
        {
            latitude: 34.241192,
            longitude: 108.934802,
            problem: true,
        },
        {
            latitude: 34.241182,
            longitude: 108.932235,
            problem: true,
        },
        {
            latitude: 34.247227,
            longitude: 108.932311,
            problem: true,
        },
        {
            latitude: 34.250833,
            longitude: 108.932352,
            problem: true,
        },
        {
            latitude: 34.250877,
            longitude: 108.931756,
            problem: true,
        },
        {
            latitude: 34.250944,
            longitude: 108.931576,
            problem: true,
        },
        {
            latitude: 34.250834,
            longitude: 108.929662,
            problem: true,
        },
        {
            latitude: 34.250924,
            longitude: 108.926015,
            problem: true,
        },
        {
            latitude: 34.250802,
            longitude: 108.910121,
            problem: true,
        },
        {
            latitude: 34.269718,
            longitude: 108.909921,
            problem: true,
        },
        {
            latitude: 34.269221,
            longitude: 108.922366,
            problem: false,
        },
        {
            latitude: 34.274531,
            longitude: 108.922388,
            problem: false,
        },
        {
            latitude: 34.276201,
            longitude: 108.923433,
            problem: false,
        }
    ]



    export default {
        data() {
            return {
                latitude: mapData[0].latitude,
                longitude: mapData[0].longitude,
                scale: 14,
                markers: [{
                    id: 1,
                    width: '45px',
                    height: '45px',
                    iconPath: '/static/car.png',
                    latitude: mapData[0].latitude,
                    longitude: mapData[0].longitude,
                    callout:{
                        content: "车辆10545", //文本
                        color: '#ffffff', //文字颜色
                        fontSize: 12, //文本大小
                        borderRadius: 15, //边框圆角
                        borderWidth: 2,
                        padding: 6,
                        bgColor: '#00A8FF', //背景颜色
                        display: 'ALWAYS', //常显
                    }
                }],
                timer: null,
                polyline: [{
                    points: mapData,
                    width: 8,
                    arrowLine: true,
                    color: '#5cf60d'
                }],
                currentIndex: 0,
            }
        },
        onLoad(options) {
            this.trackData();
        },
        onUnload() {
            clearInterval(this.timer);
            this.timer = null;
        },
        methods: {
            trackData() {
                let mapContext = uni.createMapContext("map", this);
                this.timer = setInterval(() => {
                    this.currentIndex++;
                    this.latitude = Number(this.polyline[0].points[this.currentIndex].latitude);
                    this.longitude = Number(this.polyline[0].points[this.currentIndex].longitude);
                    this.scale = 13;
                    mapContext.translateMarker({
                        markerId: 1,
                        destination: {
                            longitude: this.longitude,
                            latitude: this.latitude,
                        },
                        duration: 100
                    })
                    if (this.currentIndex === this.polyline[0].points.length - 1) {
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 500)
            }
        }
    }

 

posted @ 2022-12-07 11:24  云里知音  阅读(498)  评论(0)    收藏  举报