3***@qq.com
3***@qq.com
  • 发布:2025-10-22 18:12
  • 更新:2025-10-23 09:25
  • 阅读:64

uniapp打包微信小程序后MapContext.translateMarker在鸿蒙真机预览中不起效果

分类:鸿蒙Next

<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '地图演示',
navigationStyle: 'custom',
},
}
</route>

<template> <PageLayout backRouteName="index" navTitle="地图演示" routeMethod="pushTab"> <view> <map id="map" :style="{ width: screenWidth + 'px',height: mapHeight+ 'px' }" :latitude="center.latitude" longitude="center.longitude" :polyline="polyline" :markers="markers" scale="16"> </map>
</view>
</PageLayout>
</template>

<script lang="ts" setup>
//
import { ref } from 'vue'
import { useRouter } from '@/plugin/uni-mini-router'
import { useToast, useMessage, useNotify } from 'wot-design-uni'
import { us, os } from '@/common/work'
import Grid from '@/components/Grid/Grid.vue'

const mapHeight = uni.getSystemInfoSync().windowHeight * 0.9;  
const screenWidth = uni.getSystemInfoSync().windowWidth;  
const center = ref({  
                latitude: 39.90469, longitude: 116.40717,  
            });  
            //轨迹数据  
const trackPoints = ref([  
                 {  
                    latitude: 39.90469,  
                    longitude: 116.40717  
                 },  
                 {  
                    latitude: 39.90569,  
                    longitude: 116.40817  
                 },  
                 {  
                    latitude: 39.90669,  
                    longitude: 116.40917  
                 },  
                 {  
                    latitude: 39.90769,  
                    longitude: 116.41017  
                 },  
                 {  
                    latitude: 39.90869,  
                    longitude: 116.41117  
                 }  
            ]);  
const polyline = ref([]);  
const markers = ref([{  
                id: 1,  
                latitude: 39.90469,  
                longitude: 116.40717,  
                iconPath: '/static/car.png',  
                width: 30,  
                height: 30,  
                rotate: 0  
            }]);  
const mapContext = ref();  
const isPlaying = ref(false);  
const currentIndex = ref(0);  
const speed = ref(5);  
const animationDuration = ref(2000);  
const currentProgress = ref(0);  

initMap();  
function initMap() {  
                // #ifdef MP-WEIXIN  
                mapContext.value = wx.createMapContext('map', this);  
                // #endif  
                // #ifdef APP-PLUS  
                mapContext.value = uni.createMapContext('map', this);  
                // #endif  

                // 设置轨迹线  
                polyline.value = [{  
                    points: trackPoints.value,  
                    color: '#0091FF',  
                    width: 6,  
                    arrowLine: true  
                }];  
                // 轨迹回放-translateMarker(带自动旋转等功能)  
                togglePlay()  
                // 轨迹回放-moveAlong  
                // this.moveMaker()  
            };  

function moveMaker(){  
                mapContext.value.moveAlong({  
                    markerId: 1,  
                    path: trackPoints.value,  
                    autoRotate: true, // 标记点是否自动旋转  
                    duration: 10000, // 动画持续时间,单位ms  
                    success: () => {  
                        console.log('轨迹回放完成');  
                    }  
                });  
                // 调整地图视野以包含整个轨迹  
                mapContext.value.includePoints({  
                    points: trackPoints.value,  
                    padding: [50, 50, 50, 50]  
                });  
            };  

            // 开始/暂停动画  
function togglePlay() {  
    console.log()  
    if (isPlaying.value) {  
        pauseAnimation();  
    } else {  
        startAnimation();  
    }  
};  

            // 开始动画  
function startAnimation() {  
                if (currentIndex.value >= trackPoints.value.length - 1) {  
                    currentIndex.value = 0;  
                }  

                isPlaying.value = true;  
                moveToNextPoint();  
            };  

            // 暂停动画  
function pauseAnimation() {  
                isPlaying.value = false;  
                // #ifdef MP-WEIXIN || APP-PLUS  
                //mapContext.value.stopTranslateMarker();  
                // #endif  
            };  

            // 重置动画  
function resetPlay() {  
                pauseAnimation();  
                currentIndex.value = 0;  
                currentProgress.value = 0;  

                const firstPoint = trackPoints.value[0];  
                markers.value[0].latitude = firstPoint.latitude;  
                markers.value[0].longitude = firstPoint.longitude;  
                center.value = {  
                    ...firstPoint  
                };  
                markers.value = [...markers.value];  
            };  

            // 移动到下一个点  
    function moveToNextPoint() {  
                if (!isPlaying.value || currentIndex.value >= trackPoints.value.length - 1) {  
                    isPlaying.value = false;  
                    return;  
                }  

                const fromPoint = trackPoints.value[currentIndex.value];  
                const toPoint = trackPoints.value[currentIndex.value + 1];  

                // 计算动画持续时间(基于距离和速度)  
                const distance = calculateDistance(fromPoint, toPoint);  
                const duration = Math.max(500, Math.min(3000, distance * 1000 / speed.value));  

                // 计算方向角度  
                const rotate = calculateRotate(fromPoint, toPoint);  

                mapContext.value.translateMarker({  
                    markerId: 1,  
                    destination: {  
                        latitude: toPoint.latitude,  
                        longitude: toPoint.longitude  
                    },  
                    autoRotate: true,  
                    rotate: rotate,  
                    duration: duration,  
                    animationEnd: () => {  
                        currentIndex.value++;  
                        currentProgress.value = Math.round(  
                            (currentIndex.value / (trackPoints.value.length - 1)) * 100  
                        );  
                        moveToNextPoint();  
                    },  
                    fail: (e) =>   
                    {  
                        console.log('fail', e);  
                    }  
                })  

                // 更新中心点  
                center.value = {  
                    latitude: (fromPoint.latitude + toPoint.latitude) / 2,  
                    longitude: (fromPoint.longitude + toPoint.longitude) / 2  
                };  
            };  

            // 计算两点间距离  
    function calculateDistance(point1, point2) {  
                const R = 6371000; // 地球半径(米)  
                const dLat = (point2.latitude - point1.latitude) * Math.PI / 180;  
                const dLng = (point2.longitude - point1.longitude) * Math.PI / 180;  
                const a =  
                    Math.sin(dLat / 2) * Math.sin(dLat / 2) +  
                    Math.cos(point1.latitude * Math.PI / 180) *  
                    Math.cos(point2.latitude * Math.PI / 180) *  
                    Math.sin(dLng / 2) * Math.sin(dLng / 2);  
                const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));  
                return R * c;  
            };  

            // 计算方向角度  
    function calculateRotate(fromPoint, toPoint) {  
                const dx = toPoint.longitude - fromPoint.longitude;  
                const dy = toPoint.latitude - fromPoint.latitude;  
                return Math.atan2(dy, dx) * 180 / Math.PI;  
            };  

</script>

<style lang="scss" scoped>
//
.mb-2 {
margin-bottom: 10px;
}

.box {
background-color: #fff;
margin: 25px 16px;
.title {
padding: 10px;
padding-bottom: 0;
font-size: 15;
color: #666666;
margin-bottom: 20upx;
}

.content { deep(.wd-button), deep(.imgView) { margin: 10px;
} deep(.wd-button) { &.info {
background-color: #909cb8;
}
&.warning {
background-color: #f0863b;
}
&.success {
background-color: #33d19d;
}
&.error {
background-color: #f04550;
}
}
}
}
.router {
padding: 30px 15px;
display: flex;
flex-wrap: wrap;
.wd-button {
margin-bottom: 15px;
&:nth-child(3),
&:nth-child(4) {
margin-bottom: 0;
}
}
} deep(.wd-cell-group) { margin: 0 26upx;
border-radius: 18upx;
overflow: hidden;
--wot-cell-line-height: 32px;
.wd-icon {
margin-right: 10px;
}
.wd-cell {
--wot-cell-title-fs: 15px;
--wot-cell-title-color: var(--color-gray);
.wd-cell__left {
font-size: 15px;
font-weight: 300;
}
}
}
</style>
执行过程中ios和安卓都可以,只有鸿蒙手机不执行mapContext.value.translateMarker 也不报错
2025-10-22 18:12 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

试试原生微信小程序有没有这个问题

  • 3***@qq.com (作者)

    微信小程序原生的也有这个问题,只有鸿蒙出现这种情况

    2025-10-23 09:26

  • DCloud_UNI_JBB

    反馈到微信开发者社区

    2025-10-23 12:25

3***@qq.com

3***@qq.com (作者)

小程序原生也不可以

要回复问题请先登录注册