红的是纠偏前路线,蓝的是纠偏后路线
安装依赖
npm i @amap/amap-jsapi-loader --save
例子代码
<template>
<div>
<div id="container" style="width: 100%; height: 300px;"></div>
<button @click="Polyline">点击测试</button>
<button @click="graspRoad1">轨迹纠偏</button>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: ''//你的安全秘钥
}
export default {
data() {
return {
map: null,
AMap:null,
graspRoad:null
}
},
mounted(){
this.init();
},
methods: {
init(){
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": ["AMap.GraspRoad"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map('container');
this.AMap = AMap;
}).catch(e => {
console.log(e);
})
},
Polyline(){
var pathParam = [
{"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
{"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
{"x":116.479384,"y":39.998546,"sp":10,"ag":110,"tm":3},
{"x":116.481053,"y":39.998204,"sp":10,"ag":120,"tm":4},
{"x":116.481793,"y":39.997868,"sp":10,"ag":120,"tm":5},
{"x":116.482898,"y":39.998217,"sp":10,"ag":30, "tm":6},
{"x":116.483789,"y":39.999063,"sp":10,"ag":30, "tm":7},
{"x":116.484674,"y":39.999844,"sp":10,"ag":30, "tm":8}]
var path1 = [];
for(var i=0;i<pathParam.length;i+=1){
path1.push([pathParam[i].x,pathParam[i].y])
}
let AMap = this.AMap;
var oldLine = new AMap.Polyline({
path:path1,
strokeWeight:8,
strokeOpacity:1,
strokeColor:'red'
})
oldLine.setMap(this.map);
},
graspRoad1(){
var pathParam = [
{"x":116.478928,"y":39.997761,"sp":19,"ag":0, "tm":1478031031},
{"x":116.478907,"y":39.998422,"sp":10,"ag":0, "tm":2},
{"x":116.479384,"y":39.998546,"sp":10,"ag":0,"tm":3},
{"x":116.481053,"y":39.998204,"sp":10,"ag":0,"tm":4},
{"x":116.481793,"y":39.997868,"sp":10,"ag":0,"tm":5},
{"x":116.482898,"y":39.998217,"sp":10,"ag":0, "tm":6},
{"x":116.483789,"y":39.999063,"sp":10,"ag":0, "tm":7},
{"x":116.484674,"y":39.999844,"sp":10,"ag":0, "tm":8}]
let AMap = this.AMap;
var thih = this;
this.graspRoad = new AMap.GraspRoad()
this.graspRoad.driving(pathParam,function(error,result){
if(!error){
var path2 = [];
var newPath = result.data.points;
for(var i =0;i<newPath.length;i+=1){
path2.push([newPath[i].x,newPath[i].y])
}
var newLine = new AMap.Polyline({
path:path2,
strokeWeight:8,
strokeOpacity:0.8,
strokeColor:'#0091ea',
showDir:true
})
newLine.setMap(thih.map);
}
})
}
}
}
</script>
<style>
</style>