Vue + Echarts + (bmap) Baidu Map to achieve the bus, cycling, vehicle track map

The ultimate goal

The ultimate goal: personalized implementation of the bus roadmap

Take a look at the effect so you don’t lose sight of it, but keep reading if you want to achieve a similar effect

Yard up!!

1. Apply for AK of Baidu Map

Enter Baidu Developer Platform ==> Click the console ==> Application Management

If no application is available, create an application. Application type: Whitelist on the browser: Fill in the whitelist temporarily

2. Enter the AK on the VUE page

2.1 Open the HTML file as shown in the figure

2.2 Insert a piece of scrtipt code

< scripttype = "text/javascript" SRC = "https://api.map.baidu.com/api?v=2.0&ak= AK" > < / script >Copy the code

3. Start the VUE component
  1. The introduction of bmaprequire('echarts/extension/bmap/bmap')

  1. At this point you can use the syntax used to write Baidu maps in Echarts. For now you can copy the example from the official website to write and modify the demo
4. Change the data to your own data source

Take the Demo on the official website as an example

  1. Send a request for latitude and longitude data. The returned data is not the actual latitude and longitude that needs to be processed in the callback function

  1. The data is processed in the callback function,

    Your own project is certainly not so complex as the official website, you ask the backend directly to return the data you need, you do not need to process again

    2.1 Processed data ==> 1. Each of the data represents a track; 2. Coords is all the longitude and latitude on the track

conclusion

The blogger has already written out the general steps and is sure to encounter problems in implementation. Please leave a message.

\