收藏
回答

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

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




回答关注问题邀请回答
收藏
登录 后发表内容