Use Gaode map JS API 2.0 to load the starting and ending path tracks

<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: [], // The list of data 
            lineArrLx:[],// Route line drawing point 
            lineArrLxmd:[],// Pipe network line drawing points 
            endMarker:null,// End 
            startMarker:null,// The starting point 

            lineArrLxGj:[],// Route line drawing point 
            lineArrLxGjmd:[],// Pipe network line drawing points 
            endMarkerGj:null,// End 
            startMarkerGj:null,// The starting point 

            map: null,
        };
    },
    mounted() {
        this.leibiao(this.pageNum, this.pagesize);
    },
    watch: {},
    methods: {
        //  Get list data 
        leibiao(pageNum, pagesize) {
           //  Request data interface  
           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);  // Planned driving route 
         that.xianGjMap(maplx);  // Planned driving route    
        },
        /*
        *  Map making 
        * */
        // Make a map 
        //  standard  normal    Mirage black  dark   Moonlight silver  light   Yuanshandai  whitesmoke  The grass is green  fresh  Refined grey  grey  Doodle  graffiti  Macaroon  macaron   Indigo blue blue   Polar night blue  darkblue   Sauce seed  wine
        // Make a map 
        //  standard  normal    Mirage black  dark   Moonlight silver  light   Yuanshandai  whitesmoke  The grass is green  fresh  Refined grey  grey  Doodle  graffiti  Macaroon  macaron   Indigo blue blue   Polar night blue  darkblue   Sauce seed  wine
        initMap() {
            let that=this;
            let mapys='amap://styles/macaron';
            let mapcenter=[114.473232,38.007664];           
            // Initialize map 
            this.map = new AMap.Map('amap', {
                resizeEnable: true,
                center: mapcenter,
                zoom: 13,
                viewMode: "2D", // Use 3D View 
                mapStyle: mapys, // Set the display style of the map 
            });
            this.map.clearMap();  //  Remove the map cover 
        },
      // Generate line array 
        xianmap(gwarry){
            let that=this
            gwarry.forEach(function(v,i) {
                if(v.planRoute != null){
                    that.mpaxian(v.planRoute,v,'#00aaff')
                }
            });
        },
        mpaxian(maplineArr,v,color){
            // Coordinate set 
            let lineArr=[]
            maplineArr.forEach(function(q,w) {
                lineArr.push(onezhuan(q))
            })
            function onezhuan(m){
                return m.split(',')
            };
            //  Total coordinates , Starting and ending coordinates 
            var last = lineArr[0];
            // Route polyline 
            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],  // Latitude and longitude of the starting point 
                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)
                }),   // The starting point ico
                offset: new AMap.Pixel(-10, -30),
                autoRotation: true,
            });
            this.endMarker = new AMap.Marker({
                map: this.map,
                position: lineArr[lineArr.length-1], // Latitude and longitude of the end point 
                icon: new AMap.Icon({
                    //  Icon size 
                    size: new AMap.Size(25, 34),
                    //  The drawing address of the icon 
                    image: require('@/assets/images/dir-marker.png'),
                    //  The size of the picture used by the icon 
                    imageSize: new AMap.Size(135, 40),
                    //  Icon drawing offset 
                    imageOffset: new AMap.Pixel(-95, -3)
                }),   // End 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){
            // Coordinate set 
            let lineArrGj=[]
            maplineArr.forEach(function(q,w) {
                lineArrGj.push(onezhuan(q))
            })
            function onezhuan(m){
                return m.split(',')
            };
            //  Total coordinates , Starting and ending coordinates 
            var last = lineArrGj[0];
            // Route polyline 
            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);
            // Start and end 
            this.startMarkerGJ = new AMap.Marker({
                map: this.map,
                position: lineArrGj[0],  // Latitude and longitude of the starting point 
                icon: new AMap.Icon({
                    size: new AMap.Size(32, 32),
                    image: require('@/assets/images/dir-car.png'),
                    imageSize: new AMap.Size(32, 32),
                }),// The starting point ico
                offset: new AMap.Pixel(0, 0),
                autoRotation: true,
                // angle:-90,

            });
            this.endMarkerGJ = new AMap.Marker({
                map: this.map,
                position: lineArrGj[lineArrGj.length-1], // Latitude and longitude of the end point 
                icon: new AMap.Icon({
                    //  Icon size 
                    size: new AMap.Size(32, 32),
                    //  The drawing address of the icon 
                    image: require('@/assets/images/dir-car.png'),
                    //  The size of the picture used by the icon 
                    imageSize: new AMap.Size(32, 32),
                }),   // End ico
                offset: new AMap.Pixel(0, 0),
                autoRotation: true,
            });
            this.map.add([this.startMarkerGJ,this.endMarkerGJ]);
        },
    }
};