做的是地图相关项目,先在地图上标记若干个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>