vue框架,使用高德地图的轨迹回放功能,发现轨迹回放的时候,那个行动的marker图标不沿着路线走,或者可以说不准确,现在毫无头绪,望帮忙出出主意
你好,根据你的描述,我认为可能有以下几种原因导致轨迹回放的marker图标不准确:
地图上的路线与实际路线不一致,例如道路施工、道路封闭等情况。你可以尝试在地图上手动绘制一条准确的路线,或者使用高精度地图SDK。
轨迹回放的速度设置过快,导致marker图标跳过了一些关键点。你可以调整速度参数,或者采用更精细的轨迹点数据。
轨迹回放的算法有误,导致marker图标未能按照路线行进。你可以检查轨迹回放算法的实现,或者使用已有的成熟轨迹回放组件。
以下是一个简单的示例,使用高德地图的轨迹回放功能:
<template>
<div class="map-container">
<div id="map"></div>
</div>
</template>
<script>
import AMap from 'AMap'
import 'AMap/AMap.css'
export default {
data() {
return {
map: null,
marker: null,
path: [], // 轨迹点数组
playback: null, // 轨迹回放实例
}
},
mounted() {
this.initMap()
this.initPlayback()
},
methods: {
// 初始化地图
initMap() {
this.map = new AMap.Map('map', {
zoom: 14,
center: [116.39, 39.9],
})
},
// 初始化轨迹回放
initPlayback() {
AMapUI.loadUI(['misc/PathSimplifier'], PathSimplifier => {
const pathSimplifierIns = new PathSimplifier({
map: this.map,
getPath: function(pathData, pathIndex) {
return pathData.path
},
getHoverTitle: function(pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
return pathData.name + ',点:' + pointIndex + '/' + pathData.path.length
}
return pathData.name + ',点数量' + pathData.path.length
},
renderOptions: {
pathLineStyle: {
strokeStyle: '#0E9AFE',
lineWidth: 6,
dirArrowStyle: true,
},
getPathStyle: function(pathItem, zoom) {
const color = {
0: 'orange',
1: 'red',
2: 'blue',
}[pathItem.pathData.type]
return {
strokeStyle: color,
lineWidth: 6,
}
},
},
})
this.path = [
{
name: '轨迹1',
type: 0,
path: [
[116.39, 39.9],
[116.4, 39.91],
[116.41, 39.92],
[116.42, 39.93],
],
},
{
name: '轨迹2',
type: 1,
path: [
[116.4, 39.9],
[116.41, 39.91],
[116.42, 39.92],
[116.43, 39.93],
],
},
]
pathSimplifierIns.setData(this.path)
this.playback = pathSimplifierIns.createPathNavigator(0, {
loop: true,
speed: 100, // 播放速度
pathNavigatorStyle: {
width: 32,
height: 32,
content: PathSimplifier.Render.Canvas.getImageContent(
'https://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/imgs/car.png',
onload,
onerror
),
strokeStyle: null,
fillStyle: null,
},
})
this.playback.start()
})
},
},
}
</script>
<style>
.map-container {
position: relative;
width: 100%;
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
这个有用 但是我有几个问题想问下,就是行驶的时候这个图片能不能不偏移,而且我只想巡航一次 就是打开这个地图 2秒后开始播放轨迹 然后播放后成功后就不播放了 而且图标是停留在终点的