uniapp 使用高德地图 对路线进行纠偏

红的是纠偏前路线,蓝的是纠偏后路线

1. 安装依赖

npm i @amap/amap-jsapi-loader --save

2. 例子代码

<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>