sfjlkd
sfjlkd
  • 发布:2023-11-17 15:34
  • 更新:2023-11-17 15:34
  • 阅读:78

为什么无法多个marker移动到的目标点(translateMarker的destination)?

分类:uni-app

做的是地图相关项目,先在地图上标记若干个markers,然后遍历markers数组,让他们每个都移动到各自的目标点。

现状就是,只有一个点的时候能移动,多个就移动不了。

markers的数据

[  
    {  
        "longitude": 113.882013,  
        "latitude": 22.559969,  
        "iconPath": "https://xcx.zoujibu.com.cn/uploads/20231114/54056416b75f6b6d9e7cdae74efc3d2f.jpeg",  
        "width": 30,  
        "height": 30,  
        "id": 459,  
        "label": {  
            "content": "姓名1",  
            "color": "#000",  
            "bgColor": "#ffea00",  
            "padding": 2,  
            "borderRadius": 4,  
            "fontSize": 10,  
            "textAlign": "center"  
        },  
        "juli": 1165,  
        "playIndex": 1,  
        "coordinate": [{  
            "latitude": 22.559969,  
            "longitude": 113.882013,  
            "problem": false  
        }, {  
            "latitude": 22.550262,  
            "longitude": 113.886256,  
            "problem": false  
        }]  
    },  
    {  
        "longitude": 113.358262,  
        "latitude": 22.940951,  
        "iconPath": "https://xcx.zoujibu.com.cn/uploads/20231114/54056416b75f6b6d9e7cdae74efc3d2f.jpeg",  
        "width": 30,  
        "height": 30,  
        "id": 373,  
        "label": {  
            "content": "姓名2",  
            "color": "#000",  
            "bgColor": "#ffea00",  
            "padding": 2,  
            "borderRadius": 4,  
            "fontSize": 10,  
            "textAlign": "center"  
        },  
        "juli": 1772,  
        "playIndex": 1,  
        "coordinate": [{  
            "latitude": 22.940951,  
            "longitude": 113.358262,  
            "problem": false  
        }, {  
            "latitude": 22.948929,  
            "longitude": 113.343299,  
            "problem": false  
        }]  
    }, {  
        "longitude": 113.355733,  
        "latitude": 22.933122,  
        "iconPath": "https://xcx.zoujibu.com.cn/uploads/20231114/54056416b75f6b6d9e7cdae74efc3d2f.jpeg",  
        "width": 30,  
        "height": 30,  
        "id": 369,  
        "label": {  
            "content": "姓名3",  
            "color": "#000",  
            "bgColor": "#ffea00",  
            "padding": 2,  
            "borderRadius": 4,  
            "fontSize": 10,  
            "textAlign": "center"  
        },  
        "juli": 1041,  
        "playIndex": 1,  
        "coordinate": [{  
            "latitude": 22.933122,  
            "longitude": 113.355733,  
            "problem": false  
        }, {  
            "latitude": 22.923987,  
            "longitude": 113.357926,  
            "problem": false  
        }]  
    }, {  
        "longitude": 113.513587,  
        "latitude": 22.825082,  
        "iconPath": "https://xcx.zoujibu.com.cn/uploads/20231114/54056416b75f6b6d9e7cdae74efc3d2f.jpeg",  
        "width": 30,  
        "height": 30,  
        "id": 356,  
        "label": {  
            "content": "姓名4",  
            "color": "#000",  
            "bgColor": "#ffea00",  
            "padding": 2,  
            "borderRadius": 4,  
            "fontSize": 10,  
            "textAlign": "center"  
        },  
        "juli": 714,  
        "playIndex": 1,  
        "coordinate": [{  
            "latitude": 22.825082,  
            "longitude": 113.513587,  
            "problem": false  
        }, {  
            "latitude": 22.821479,  
            "longitude": 113.507819,  
            "problem": false  
        }]  
    }, {  
        "longitude": 113.363426,  
        "latitude": 22.936005,  
        "iconPath": "https://xcx.zoujibu.com.cn/uploads/20231114/54056416b75f6b6d9e7cdae74efc3d2f.jpeg",  
        "width": 30,  
        "height": 30,  
        "id": 348,  
        "label": {  
            "content": "姓名5",  
            "color": "#000",  
            "bgColor": "#ffea00",  
            "padding": 2,  
            "borderRadius": 4,  
            "fontSize": 10,  
            "textAlign": "center"  
        },  
        "juli": 1873,  
        "playIndex": 1,  
        "coordinate": [{  
            "latitude": 22.936005,  
            "longitude": 113.363426,  
            "problem": false  
        }, {  
            "latitude": 22.940714,  
            "longitude": 113.38097,  
            "problem": false  
        }]  
    }  
]

遍历代码

this.covers.map( item => {  
    this.dotranslateMarker(item)  
})

移动代码

dotranslateMarker(item){  
    this.map.translateMarker({  
        markerId: item.id,  
        autoRotate: false,  
        destination: {  
            longitude: item.coordinate[item.playIndex].longitude,  
            latitude: item.coordinate[item.playIndex].latitude  
        },  
        duration: 60000,  
        complete: (e) => {  
            if(item.playIndex == 1) item.playIndex = 0  
            else item.playIndex = 1  
            let tt = 0  
            let timmm = setInterval( () => {  
                tt++  
                if(tt == 20){  
                    tt = 0  
                    clearInterval(timmm)  
                    timmm = null  
                }  
            }, 100)  
            setTimeout( () => {  
                this.dotranslateMarker(item)  
            }, 300)  
        },  
    })  
}

地图组件

<map  
    id="around-food-map"  
    style="width: 100%; height: 100%;"   
    :latitude="latitude"   
    :longitude="longitude"  
    :markers="covers"  
    :label="labelList"  
    @markertap="markerTapFun"  
    @labeltap="labeltap"  
    @callouttap="callouttap"  
    @controltap="controltap"  
    @anchorpointtap="anchorpointtap"  
    :enable-satellite="towd"  
></map>
2023-11-17 15:34 负责人:无 分享
已邀请:

要回复问题请先登录注册