vue 中加入高德的 定位和轨迹

参考：https://elemefe.github.io/vue-amap/#/zh-cn/coverings/text

https://lbs.amap.com/api/javascript-api/reference-amap-ui/mass-data/pathsimplifier/

1、在vue 项目中的 main.js 中加入 

import VueAMap from 'vue-amap'
/* 高德地图的引入 */
VueAMap.initAMapApiLoader({
    key: '5ab20b9b8aad8959b51d74f0cc3bc0ce',
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
    uiVersion: '1.0', // ui库版本，不配置不加载,
    v: '1.4.4'
});

Vue.use(VueAMap);

2、在 index.html 中加入 

<script src="http://webapi.amap.com/maps?v=1.4.6&key=e598f982202f82de4802cefed15fe8e5"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

 注意：其中的 key 需要自己高德官网去注册获得。

3、这个时候 要把 高德组件加入 项目

  在 terminal 执行 npm install --save vue-amap 

下面是具体的定位代码

<template>
    <div class="myTable">
        <div class="input searchInfo" >
            <span><span>ICCID：</span><input v-model="iccid"  placeholder="请输入"></input></span>
            <el-button type="primary" @click="findPosition" style="float: right; position: relative;left: -20px;" >搜索</el-button>
        </div>
        <div class="amap-page-container">
            <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
                <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :content="marker.content" :angle="marker.angle" :events="marker.events" :title="marker.title" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
            </el-amap>
        </div>
    </div>

</template>

<script>
    import {axios} from "../../config/axios";
    export default {
        name: 'dev-position',
        data () {
            return {
                iccid:'',
                zoom: 15,
                markers: [],
                center: [114.037651, 22.627568],
            }
        },
        methods:{
            findPosition(){
                axios.get("/api/contrail/flashPosition",{params:{iccid:this.iccid}}).then(result => {
                    var oneLogLat = result.data.data;
                    if (result.data.code != 200 || oneLogLat === null) {
                        console.log(result)
                        return
                    }
                    var oneArr = [];
                    var loglat = oneLogLat.split(",");
                    const currentLng = parseFloat(loglat[5]);
                    const currentLat = parseFloat(loglat[3]);
                    oneArr.push(currentLng);
                    oneArr.push(currentLat);
                    const dir = loglat[9]; // 方向角
                    this.myMarkers(oneArr, dir);

                });
            },
            myMarkers(val,dir){
                let marker = {
                    position: val,
                    events: {
                        click: () => {
                             console.log("获取信息失败")
                        },
                    },
                    content:'<img src="http://test.blackview4g.com:8280/images/car.png" />',
                    angle:dir,
                    title:title,
                };
                this.markers.push(marker);
            },
        }
    }
</script>
<style scoped>
    .input input{
        position: relative;
        display: inline-block;
        border-radius: 5px;
        height: 20px;
        margin-right: 20px;
        font-size: 16px;
        line-height: 32px;
        width: 250px;
        padding-left: 8px;
    }
    .amap-page-container {
        height: 600px;
    }

</style>

下面是具体的轨迹代码

<template>
    <div class="myTable">
        <div class="input searchInfo" >
            <span><span>ICCID：</span><input v-model="iccid"  placeholder="请输入"></input></span>
            <span><span>时间：</span>
                <el-date-picker
                        v-model="startTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
            </span>
            <el-button type="primary" @click="findTrackData" style="float: right; position: relative;left: -20px;" >搜索</el-button>
        </div>
        <div class="amap-page-container">
            <div id="amap-show" class="amap-demo" style="height: 600px;"></div>
        </div>
    </div>
</template>

<script>
    // NPM 方式
    import { lazyAMapApiLoaderInstance } from 'vue-amap';
    import carUrl from '../../assets/img/car.png'
    export default {
        name: "track-show",
        data () {
            return {
                iccid:'',
                startTime:'',
            }
        },
        created() {
            this.initMap();
            console.log("thisDate:",this.startDate);
        },
        methods:{
            findTrackData(){
                console.log("thisDate:",this.startDate);
                this.initPage();
            },
            getGPSData(){
                this.$http.get("api/contrail/trackLocations",{params:{iccid: this.iccid,date:this.startTime}}).then(result => {
                    let code = result.data.code;
                    let gpsData = result.data.data;
                    this.loadState = false;
                    if (code !== 200 || gpsData === "" || gpsData === null) {
                        this.initMap();
                        return
                    }
                    var strArr = gpsData.split(";");
                    var length = strArr.length-1;
                    var resultStr = "";
                    for (var i = 0; i < length; i++) {
                        var gpsArr = strArr[i].split(",");
                        if(gpsArr[11]  !== "1") {
                            continue; // 去除非 GPS 数据
                        }
                        var jd = gpsArr[3];
                        var wd = gpsArr[5];
                        resultStr += "[" + wd + "," + jd + "],";
                    }
                    if(resultStr === "") {
                        this.msg ();
                        this.initMap();
                        return;
                    };
                    resultStr = "[" + resultStr + "]";
                    this.initPage(resultStr);
                })
            },
            getDurationGPSData(){
                this.$http.get("api/contrail/durationLocations",{params:{iccid: this.iccid, startTime:this.startDate, endTime:this.startDate }}).then(result => {
                    let code = result.data.code;
                    let gpsData = result.data.data;
                    if (code !== 200 || gpsData === "" || gpsData === null) {
                        this.msg ();
                        this.initMap();
                        return
                    }
                    var strArr = gpsData.split(";");
                    var length = strArr.length-1;
                    var resultStr = "";
                    for (var i = 0; i < length; i++) {
                        var gpsArr = strArr[i].split(",");
                        if(gpsArr[11]  !== "1") {
                            continue; // 去除非 GPS 数据
                        }
                        var jd = gpsArr[3];
                        var wd = gpsArr[5];
                        resultStr += "[" + wd + "," + jd + "],";
                    }
                    if(resultStr === "") {
                        this.msg();
                        this.initMap();
                        return;
                    }
                    resultStr = "[" + resultStr + "]";
                    this.initPage(resultStr);
                })
            },
            initMap(){
                lazyAMapApiLoaderInstance.load().then(() => {
                    this.map = new AMap.Map('amap-show', {
                            center: [114.037939,22.627198],
                            zoom: 11
                        }
                    )
                });
            },
            initPage(){
                console.log("===== init===");
                lazyAMapApiLoaderInstance.load().then(() => {
                    this.map = new AMap.Map('amap-show', {
                            center: [114.037939,22.627198],
                            zoom: 6
                        },
                        AMapUI.loadUI(['misc/PathSimplifier'], (PathSimplifier) => {

                            if (!PathSimplifier.supportCanvas) {
                                alert('当前环境不支持 Canvas！');
                                return;
                            }

                            //创建组件实例
                            var pathSimplifierIns = new PathSimplifier({
                                zIndex: 100,
                                map: this.map, //所属的地图实例
                                getPath: (pathData) => {
                                    //将gps描述的所有的点数放到全局变量
                                    pathData.path.length;                                    //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
                                    return pathData.path;
                                },
                                getHoverTitle: (pathData, pathIndex, pointIndex)=> {
                                    //返回鼠标悬停时显示的信息
                                    if (pointIndex >= 0) {
                                        //鼠标悬停在某个轨迹节点上
                                        return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
                                    }
                                    //鼠标悬停在节点之间的连线上
                                    return pathData.name + '，点数量' + pathData.path.length;
                                },
                                renderOptions: {
                                    //轨迹线的样式
                                    pathLineStyle: {
                                        strokeStyle: 'red',

                                        lineWidth: 3,   //线宽度
                                        dirArrowStyle:{

                                            stepSpace:15  //stepSpace: {number} 箭头排布的间隔，单位像素
                                        }
                                    }
                                }
                            });
                            //这里构建两条简单的轨迹，仅作示例
                            // var gpsData = eval(data);
                            let gpsData =  [[116.405289, 39.904987],[113.964458, 40.54664],[111.47836, 41.135964],[108.949297, 41.670904],[106.380111, 42.149509],[103.774185, 42.56996],[101.135432, 42.930601],[98.46826, 43.229964],[95.777529, 43.466798],[93.068486, 43.64009],[90.34669, 43.749086],[87.61792, 43.793308]];
                            pathSimplifierIns.setData([{
                                name: '轨迹0',
                                path: gpsData
                            }]);

                            var nav = pathSimplifierIns.createPathNavigator(0, {
                                loop: true,
                                speed: 400000,
                                pathNavigatorStyle: {
                                    width: 16,
                                    height: 32,
                                    content: PathSimplifier.Render.Canvas.getImageContent(carUrl, onload, onerror),
                                    strokeStyle: null,
                                    fillStyle: null
                                }
                            });
                            nav.start();
                            /*var currentIndex = -1; //定义一个临时 变量存储 navg move方法触发频发，展示数据只展示一次
                            let _this = this;
                            nav.on('move',function() {
                                var onecuso = nav.getCursor().idx; //move 一直触发 获取 轨迹中 的下标
                                if(onecuso > pointNum-1)return false;
                                if(currentIndex !== onecuso){
                                    currentIndex = onecuso;
                                    _this.speed1 = (speedArr[onecuso]*3.6).toFixed(1);  // 保留一位小数
                                }
                            });*/
                        })
                    )
                });
            },
            msg() {
                this.$notify.info({
                    title: '提示',
                    message: '暂无轨迹数据'
                });
            },
        }
    }
</script>

<style scoped>
    .input input{
        position: relative;
        display: inline-block;
        border-radius: 5px;
        height: 20px;
        margin-right: 20px;
        font-size: 16px;
        line-height: 32px;
        width: 250px;
        padding-left: 8px;
    }
</style>