Implementation of Gaode Map Introduction and Trajectory Drawing in Vue

Introduction to Gaode Map and Drawing of Trajectories

1. Step 1

Use cdn in vue to introduce Gaode map and perform global configuration in it. (The introduction and configuration methods of Gaode maps are available on Baidu, so I will not introduce them in detail here);
1） npm install vue-amap --save
2）

import VueAMap from ‘vue-amap'
(VueAMap);
({
key: ‘********************',// My key value on the Gaode map platformplugin: [‘', ‘', ‘', ‘', ‘', ‘', ‘', ‘',‘',‘',‘',‘'],//The required Gaode Map plugin, what plugin is needed and what plugin is added (it is only a part of it)// The default version of Gaode sdk is 1.4.4v: ‘1.4.4',
uiVersion:‘1.0.11'
});

2. Step 2

//Introduce a map, and the map can be displayed on the page at this time.
  = new ('themap', {
     resizeEnable: true,
     center:[121.716284,29.888144],//This is the center point of the map     zoom: 18,//The level of the map     layers: [
      new ,
       //This is the method I use to draw my own layers on the map, which can be removed.     ]
    });

//Introduce Marker and draw point marks
 = new ({
     map: ,
     position: ,
     icon: pic,//Here is the picture I want    });

//Draw the track
 = new ({
     map: ,
     path: , // Here is an array of coordinates of tracks     showDir: true,
     strokeColor: "#28F", //Line Color // strokeOpacity: 1, //Line Transparency     strokeWeight: 6 //Line width     // strokeStyle: "solid" // Line style    });
    var passedPolyline = new ({
     map: ,
     strokeColor: "#AF5", //Line Color     //path: ,
     // strokeOpacity: 1, // Line transparency     strokeWeight: 6 //Line width     // strokeStyle: "solid" // Line style    });
("moving", function(e) {
     ();
    });
    ();//Automatically adjust to the appropriate position

The above is the entire process of trajectory drawing

Extended

To draw layers on your own map, you can use the imageLayer used above

  = new ({
     url:tupian , //This is my own picture     bounds: new (
      [121.71105271149695,29.885719370176783],//The coordinates in the lower left corner      [121.72236765648086,29.891597442759533],//The coordinates in the upper right corner     ),
     zooms: [15, 18] //This is displayed in the range of 15 to 18    });

Here we need to remind you that the pictures you put must be based on the direction of the map.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.