uni-app mapContext.translateMarker 轨迹显示问题：浏览器有轨迹显示，但安卓手机无法显示轨迹

uni-app mapContext.translateMarker 轨迹显示问题：浏览器有轨迹显示，但安卓手机无法显示轨迹

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.1.18
手机系统 Android
手机系统版本号 Android 11
手机厂商 华为
手机机型 ART-AL00x
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

carline(linedata) {
linedata = [{
latitude: 34.032236,
longitude: 108.720464
},
{
latitude: 34.042236,
longitude: 108.710688
},
{
latitude: 34.052236,
longitude: 108.720688
},
{
latitude: 34.072236,
longitude: 108.720688
}
]
let _this = this
clearInterval(_this.timer);
let cargps = []
linedata.forEach(function(item, index) {
cargps.push({
id: index,
latitude: item.latitude,
longitude: item.longitude,
iconPath: '../../static/iconpj/carbule.png',
width: 20,
height: 20,
})
})
var i = 0;
_this.markers = [cargps[i]]
var mapContext = uni.createMapContext("myMap", this);
let translateMarkerConfig = {
markerId: 0,
destination: {
latitude: cargps[i].latitude,
longitude: cargps[i].longitude,
},
duration: 1000,
animationEnd: function() {
console.log('1轨迹回放完成')
// 轨迹回放完成
},
fail(e) {
// 轨迹回放失败
console.log('轨迹回放失败' + e)
},
}
mapContext.translateMarker(translateMarkerConfig)
console.log(cargps[i])
}

_this.timer = setInterval(() => {  
console.log(cargps[i].latitude)  
let timefink = {  
markerId: 0,  
destination: {  
latitude: cargps[i + 1].latitude,  
longitude: cargps[i + 1].longitude,  
},  
duration: 1000,  
animationEnd: function() {  
console.log('2轨迹回放完成')  
// 轨迹回放完成  
},  
fail(e) {  
// 轨迹回放失败  
console.log('轨迹回放失败' + e)  
},  
}  
mapContext.translateMarker(timefink)  
i++  
if (i + 1 == cargps.length) {  
i = 0  
clearInterval(_this.timer);  
}  
}, 1000);

操作步骤：

carline(linedata) {
linedata = [{
latitude: 34.032236,
longitude: 108.720464
},
{
latitude: 34.042236,
longitude: 108.710688
},
{
latitude: 34.052236,
longitude: 108.720688
},
{
latitude: 34.072236,
longitude: 108.720688
}
]
let _this = this
clearInterval(_this.timer);
let cargps = []
linedata.forEach(function(item, index) {
cargps.push({
id: index,
latitude: item.latitude,
longitude: item.longitude,
iconPath: '../../static/iconpj/carbule.png',
width: 20,
height: 20,
})
})
var i = 0;
_this.markers = [cargps[i]]
var mapContext = uni.createMapContext("myMap", this);
let translateMarkerConfig = {
markerId: 0,
destination: {
latitude: cargps[i].latitude,
longitude: cargps[i].longitude,
},
duration: 1000,
animationEnd: function() {
console.log('1轨迹回放完成')
// 轨迹回放完成
},
fail(e) {
// 轨迹回放失败
console.log('轨迹回放失败' + e)
},
}
mapContext.translateMarker(translateMarkerConfig)
console.log(cargps[i])
}

_this.timer = setInterval(() => {  
console.log(cargps[i].latitude)  
let timefink = {  
markerId: 0,  
destination: {  
latitude: cargps[i + 1].latitude,  
longitude: cargps[i + 1].longitude,  
},  
duration: 1000,  
animationEnd: function() {  
console.log('2轨迹回放完成')  
// 轨迹回放完成  
},  
fail(e) {  
// 轨迹回放失败  
console.log('轨迹回放失败' + e)  
},  
}  
mapContext.translateMarker(timefink)  
i++  
if (i + 1 == cargps.length) {  
i = 0  
clearInterval(_this.timer);  
}  
}, 1000);

预期结果：

carline(linedata) {
linedata = [{
latitude: 34.032236,
longitude: 108.720464
},
{
latitude: 34.042236,
longitude: 108.710688
},
{
latitude: 34.052236,
longitude: 108.720688
},
{
latitude: 34.072236,
longitude: 108.720688
}
]
let _this = this
clearInterval(_this.timer);
let cargps = []
linedata.forEach(function(item, index) {
cargps.push({
id: index,
latitude: item.latitude,
longitude: item.longitude,
iconPath: '../../static/iconpj/carbule.png',
width: 20,
height: 20,
})
})
var i = 0;
_this.markers = [cargps[i]]
var mapContext = uni.createMapContext("myMap", this);
let translateMarkerConfig = {
markerId: 0,
destination: {
latitude: cargps[i].latitude,
longitude: cargps[i].longitude,
},
duration: 1000,
animationEnd: function() {
console.log('1轨迹回放完成')
// 轨迹回放完成
},
fail(e) {
// 轨迹回放失败
console.log('轨迹回放失败' + e)
},
}
mapContext.translateMarker(translateMarkerConfig)
console.log(cargps[i])
}

_this.timer = setInterval(() => {  
console.log(cargps[i].latitude)  
let timefink = {  
markerId: 0,  
destination: {  
latitude: cargps[i + 1].latitude,  
longitude: cargps[i + 1].longitude,  
},  
duration: 1000,  
animationEnd: function() {  
console.log('2轨迹回放完成')  
// 轨迹回放完成  
},  
fail(e) {  
// 轨迹回放失败  
console.log('轨迹回放失败' + e)  
},  
}  
mapContext.translateMarker(timefink)  
i++  
if (i + 1 == cargps.length) {  
i = 0  
clearInterval(_this.timer);  
}  
}, 1000);

实际结果：

app端无轨迹显示

bug描述：

carline(linedata) {
linedata = [{
latitude: 34.032236,
longitude: 108.720464
},
{
latitude: 34.042236,
longitude: 108.710688
},
{
latitude: 34.052236,
longitude: 108.720688
},
{
latitude: 34.072236,
longitude: 108.720688
}
]
let _this = this
clearInterval(_this.timer);
let cargps = []
linedata.forEach(function(item, index) {
cargps.push({
id: index,
latitude: item.latitude,
longitude: item.longitude,
iconPath: '../../static/iconpj/carbule.png',
width: 20,
height: 20,
})
})
var i = 0;
_this.markers = [cargps[i]]
var mapContext = uni.createMapContext("myMap", this);
let translateMarkerConfig = {
markerId: 0,
destination: {
latitude: cargps[i].latitude,
longitude: cargps[i].longitude,
},
duration: 1000,
animationEnd: function() {
console.log('1轨迹回放完成')
// 轨迹回放完成
},
fail(e) {
// 轨迹回放失败
console.log('轨迹回放失败' + e)
},
}
mapContext.translateMarker(translateMarkerConfig)
console.log(cargps[i])
}

_this.timer = setInterval(() => {  
console.log(cargps[i].latitude)  
let timefink = {  
markerId: 0,  
destination: {  
latitude: cargps[i + 1].latitude,  
longitude: cargps[i + 1].longitude,  
},  
duration: 1000,  
animationEnd: function() {  
console.log('2轨迹回放完成')  
// 轨迹回放完成  
},  
fail(e) {  
// 轨迹回放失败  
console.log('轨迹回放失败' + e)  
},  
}  
mapContext.translateMarker(timefink)  
i++  
if (i + 1 == cargps.length) {  
i = 0  
clearInterval(_this.timer);  
}  
}, 1000);  

app  打印台  都进不去轨迹成功失败的回调   其余所有cosoler  都能打出来

更多关于uni-app mapContext.translateMarker 轨迹显示问题：浏览器有轨迹显示，但安卓手机无法显示轨迹的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

nvue页面我记得app端好像是要放到计算属性computed里面然后重新赋值在放到map那里才会显示的。

更多关于uni-app mapContext.translateMarker 轨迹显示问题：浏览器有轨迹显示，但安卓手机无法显示轨迹的实战教程也可以访问 https://www.itying.com/category-93-b0.html


留个联系方式么？大佬？

已解决 不要用vue 用nvue

大佬是怎么解决的呢 可以分享下么

这是一个典型的Android端地图API兼容性问题。在uni-app中，translateMarker方法在Android和iOS端的实现机制不同，导致动画效果存在差异。

主要问题分析：

  1. Android端动画队列问题：Android端的地图组件对连续调用translateMarker支持不完善，当快速连续调用时可能出现动画丢失。

  2. 时序控制问题：使用setInterval直接连续调用translateMarker，在Android端容易导致前一个动画还未完成就被下一个覆盖。

建议修改方案：

carline(linedata) {
    let _this = this
    clearInterval(_this.timer);
    
    let cargps = linedata.map((item, index) => ({
        id: index,
        latitude: item.latitude,
        longitude: item.longitude,
        iconPath: '../../static/iconpj/carbule.png',
        width: 20,
        height: 20,
    }))
    
    _this.markers = [cargps[0]]
    var mapContext = uni.createMapContext("myMap", this);
    let i = 0;
    
    function moveToNext() {
        if (i >= cargps.length - 1) {
            i = 0;
            return;
        }
        
        let config = {
            markerId: 0,
            destination: {
                latitude: cargps[i + 1].latitude,
                longitude: cargps[i + 1].longitude,
            },
            duration: 1000,
            animationEnd: function() {
                console.log('轨迹点移动完成: ' + (i + 1))
                i++;
                setTimeout(moveToNext, 50); // 添加延迟确保动画队列稳定
            },
            fail: function(e) {
                console.log('轨迹回放失败: ' + JSON.stringify(e))
                // 失败后也继续执行
                i++;
                setTimeout(moveToNext, 50);
            }
        }
        
        mapContext.translateMarker(config)
    }
    
    // 启动第一个点的移动
    moveToNext();
}
回到顶部