使用高德地图JS API 2.0加载起点终点路径轨迹

<template>
  <div>
    <div class="head">
      <breadcrumb></breadcrumb>
    </div>
    <div class="rightcenter clearfix">
      <div class="box">
        <div class="right1">
          <div id="amap" style="width:98%;height:780px;"></div>
        </div>
       
      </div>
    </div>
  </div>
</template>

export default {
    name: 'vehicle',
    data() {
        return {     
            tableData: [], //列表数据
            lineArrLx:[],//路线线描点
            lineArrLxmd:[],//管网线描点
            endMarker:null,//终点
            startMarker:null,//起点

            lineArrLxGj:[],//路线线描点
            lineArrLxGjmd:[],//管网线描点
            endMarkerGj:null,//终点
            startMarkerGj:null,//起点

            map: null,
        };
    },
    mounted() {
        this.leibiao(this.pageNum, this.pagesize);
    },
    watch: {},
    methods: {
        // 获取列表数据
        leibiao(pageNum, pagesize) {
           // 请求数据接口 
           that.tableData = [{			
			"planRoute": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252;114.526447,38.023149;114.54533,38.023825",			
			"trajectory": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252",		
		}, {
			"planRoute": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252;114.526447,38.023149;114.54533,38.023825",			
			"trajectory": "114.473232,38.007664;114.48542,38.010437;114.512371,38.016252",	
		}];
         that.total = Number(res.data.total);
         let maplx= res.data.list;
         maplx.forEach(function(v,i) {
            if(v.planRoute != null){
                   v.planRoute=v.planRoute.split(";")
                   v.trajectory=v.trajectory.split(";")
            }
         });
        that.initMap()
        that.xianmap(maplx);  //规划的行车路线
         that.xianGjMap(maplx);  //规划的行车路线   
        },
        /*
        * 地图绘制
        * */
        //绘制地图
        // 标准 normal   幻影黑 dark  月光银 light  远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 macaron  靛青蓝blue  极夜蓝 darkblue  酱籽 wine
        //绘制地图
        // 标准 normal   幻影黑 dark  月光银 light  远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 macaron  靛青蓝blue  极夜蓝 darkblue  酱籽 wine
        initMap() {
            let that=this;
            let mapys='amap://styles/macaron';
            let mapcenter=[114.473232,38.007664];           
            //初始化地图
            this.map = new AMap.Map('amap', {
                resizeEnable: true,
                center: mapcenter,
                zoom: 13,
                viewMode: "2D", //使用3D视图
                mapStyle: mapys, //设置地图的显示样式
            });
            this.map.clearMap();  // 清除地图覆盖物
        },
      //生成线数组
        xianmap(gwarry){
            let that=this
            gwarry.forEach(function(v,i) {
                if(v.planRoute != null){
                    that.mpaxian(v.planRoute,v,'#00aaff')
                }
            });
        },
        mpaxian(maplineArr,v,color){
            //坐标集
            let lineArr=[]
            maplineArr.forEach(function(q,w) {
                lineArr.push(onezhuan(q))
            })
            function onezhuan(m){
                return m.split(',')
            };
            // 坐标总数，起终点坐标
            var last = lineArr[0];
            //路线折线
            var polyline = new AMap.Polyline({
                map: this.map,
                path: lineArr,
                lineJoin: 'round',
                strokeColor: color,
                strokeOpacity: 1,
                strokeWeight: 3,
                strokeStyle: "solid"
            });
            this.map.add(polyline);
            this.lineArrLx.push(polyline);
            this.startMarker = new AMap.Marker({
                map: this.map,
                position: lineArr[0],  //起点经纬度
                icon: new AMap.Icon({
                    size: new AMap.Size(25, 34),
                    image: require('@/assets/images/dir-marker.png'),
                    imageSize: new AMap.Size(135, 40),
                    imageOffset: new AMap.Pixel(-9, -3)
                }),   //起点ico
                offset: new AMap.Pixel(-10, -30),
                autoRotation: true,
            });
            this.endMarker = new AMap.Marker({
                map: this.map,
                position: lineArr[lineArr.length-1], //终点经纬度
                icon: new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(25, 34),
                    // 图标的取图地址
                    image: require('@/assets/images/dir-marker.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(135, 40),
                    // 图标取图偏移量
                    imageOffset: new AMap.Pixel(-95, -3)
                }),   //终点ico
                offset: new AMap.Pixel(-5, -30),
                autoRotation: true,
            });
            this.map.add([this.startMarker,this.endMarker]);

        },
        xianGjMap(gwarry){
            let that=this
            gwarry.forEach(function(v,i) {
                if(v.trajectory != null){
                    that.mpaxianGj(v.trajectory,v,'#0fcb14')
                }
            });
        },
        mpaxianGj(maplineArr,v,color){
            //坐标集
            let lineArrGj=[]
            maplineArr.forEach(function(q,w) {
                lineArrGj.push(onezhuan(q))
            })
            function onezhuan(m){
                return m.split(',')
            };
            // 坐标总数，起终点坐标
            var last = lineArrGj[0];
            //路线折线
            var polylineGj = new AMap.Polyline({
                map: this.map,
                path: lineArrGj,
                lineJoin: 'round',
                strokeColor: color,
                strokeOpacity: 1,
                strokeWeight: 3,
                strokeStyle: "solid"
            });
            this.map.add(polylineGj);
            this.lineArrLxGj.push(polylineGj);
            //起点和终点
            this.startMarkerGJ = new AMap.Marker({
                map: this.map,
                position: lineArrGj[0],  //起点经纬度
                icon: new AMap.Icon({
                    size: new AMap.Size(32, 32),
                    image: require('@/assets/images/dir-car.png'),
                    imageSize: new AMap.Size(32, 32),
                }),//起点ico
                offset: new AMap.Pixel(0, 0),
                autoRotation: true,
                // angle:-90,

            });
            this.endMarkerGJ = new AMap.Marker({
                map: this.map,
                position: lineArrGj[lineArrGj.length-1], //终点经纬度
                icon: new AMap.Icon({
                    // 图标尺寸
                    size: new AMap.Size(32, 32),
                    // 图标的取图地址
                    image: require('@/assets/images/dir-car.png'),
                    // 图标所用图片大小
                    imageSize: new AMap.Size(32, 32),
                }),   //终点ico
                offset: new AMap.Pixel(0, 0),
                autoRotation: true,
            });
            this.map.add([this.startMarkerGJ,this.endMarkerGJ]);
        },
    }
};