<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationBarTitleText: '地图演示',
navigationStyle: 'custom',
},
}
</route>
</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;
}
} 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 也不报错
3***@qq.com (作者)
微信小程序原生的也有这个问题,只有鸿蒙出现这种情况
2025-10-23 09:26
DCloud_UNI_JBB
反馈到微信开发者社区
2025-10-23 12:25