4***@qq.com
4***@qq.com
  • 发布:2024-07-25 15:28
  • 更新:2024-11-27 22:19
  • 阅读:189

uni.createMapContext('map', this). 很多内置方法无法使用 比如moveAlong

分类:uni-app
<template>  
    <view>  
        <nav-bar :leftText="leftText" :leftIcon="leftIcon"></nav-bar>  
        <view style="display: flex;flex-direction: column;">  
            <view class="topTip">  
                <view class='normal conter'>  
                    <p class="checkRecordNo">{{dataObj.checkRecordNo}}</p>  
                    <p class="typeName">{{dataObj.typeName}}</p>  
                    <p class="subTitle">{{dataObj.inChargeUser.name}}</p>  
                    <p><button id="buttonId" style="background-color: #007aff;color: #fff; border: #007aff;"  
                            @click="replayTrajectory" size="mini">回放轨迹</button></p>  
                </view>  
            </view>  
            <view class="map">  
                <map name="map" ref="map" id="map" style="height: 1200rpx;width: 100%;" :latitude="latitude"  
                    :longitude="longitude" :enable-satellite="true" :markers="markers" :show-compass="true"  
                    :polyline="polyline" @updated="updated">  

                </map>  

            </view>  
        </view>  

    </view>  
</template>  

<script>  
    import {  
        getCheckTrack  
    } from '@/api/index.js'  
    export default {  
        data() {  
            return {  
                leftText: "轨迹查看",  
                leftIcon: 'arrow-left',  
                latitude: null,  
                longitude: null,  
                markers: [],  
                polyline: [],  
                points: [],  
                id: null,  
                dataObj: {},  
                playbackInterval: null,  
                nextPointIndex: 0,  
                mapContext: null,  

            };  
        },  
        onLoad(options) {  
            try {  
                this.dataObj = JSON.parse(decodeURIComponent(options.item))  
                this.getCheckTrackData();  
            } catch (error) {  
                console.error("Failed to parse options.item:", error);  
            }  
        },  
        onReady() {  
            this.mapContext = uni.createMapContext('map', this)  

        },  
        methods: {  
            updated() {  
                this.getCheckTrackData();  
            },  
            //轨迹回放  
            replayTrajectory() {  
                this.mapContext.moveAlong({  
                    markerId: this.markers[0].id,  
                    path: this.points,  
                    autoRotate: false,  
                    duration: 3000,  
                    fail(err) {  
                        console.log("err", err);  
                    },  

                    success(res) {  
                        console.log('res', res);  
                    },  
                    complete(e) {  
                        console.log("都执行", e);  
                    }  

                })  
                // this.mapContext.moveAlong({  
                //  markerId: this.markers[0].id,  
                //  path: this.points,  
                //  duration: 3000,  
                //  complete: () => {  
                //      console.log('执行');  
                //  }  
                // })  
            },  
            getCheckTrackData() {  
                getCheckTrack({  
                    checkId: this.dataObj.id  
                }).then(res => {  
                    this.points = res.data.map(item => {  
                        let i = this.$wgs84ToGcj02(item.latitude, item.longitude);  
                        return i;  
                    });  
                    if (this.points.length === 0) {  
                        uni.showToast({  
                            title: '暂无轨迹数据',  
                            icon: 'error'  
                        })  
                        return  
                    };  
                    this.latitude = this.points[0].latitude;  
                    this.longitude = this.points[0].longitude;  
                    // 添加起点标记  
                    const newMarkers = this.points.map((item, index) => ({  
                        id: "start" + index,  
                        latitude: item.latitude,  
                        longitude: item.longitude,  
                        height: 30,  
                        width: 30,  
                        iconPath: '/static/map_1.png',  
                    }));  
                    // this.$set(this, 'markers', [...this.markers, ...newMarkers]);  
                    this.markers = [...newMarkers]  
                    // this.markers.push({  
                    //  id: 0,  
                    //  latitude: this.latitude,  
                    //  longitude: this.longitude,  
                    //  height: 30,  
                    //  width: 30,  
                    //  iconPath: '/static/map.png',  
                    // });  
                    this.polyline = [{  
                        points: this.points,  
                        color: "#007aff",  
                        width: 8,  
                    }]  

                })  
            }  
        }  
    };  
</script>  

<style lang="scss" scoped>  
    .topTip {  
        margin: 0 auto;  
        flex: .3;  
        width: 95%;  
        margin-top: 10rpx;  
    }  

    .map {  
        flex: auto;  
        margin-top: 30rpx;  
    }  

    .conter {  
        /* 毛玻璃效果 */  
        background: rgba(255, 255, 255, 0.6);  
        box-shadow: 0 8rpx 20rpx 0 rgba(31, 38, 135, 0.37);  
        border-radius: 10px;  
        border: 1px solid rgba(255, 255, 255, 0.18);  
        font-weight: bold;  
        z-index: 1000;  
        text-align: center;  
    }  

    .normal {  
        height: 240rpx;  
        display: flex;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
    }  
</style>

这个是代码,请问有什么问题吗?

2024-07-25 15:28 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

兄弟 解决没有 我也是最近开发app 地图 使用nvue 页面的轨迹回放也不行

要回复问题请先登录注册