This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Unconsciously, it is already the 11th day more text, refueling yo

This article is mainly about how to integrate Baidu Map in VUE project

1. First find the index.html entry file at the bottom of your project. The location of this entry file varies according to different versions, as follows:

A. The path is as follows: Project name /public/index.html

B. The path is as follows: Project name /index.html

2. Go to the page where you want to use the map and write the container for the map as follows:

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px;"></div>
  </div>
</template>
Copy the code

Note the id of the container and the fixed height of the container, otherwise the map will not come out

3. Then import the code of the script module as follows:

<script>
export default {
  name: 'Dashboard'.data(){
    return{}},mounted(){
    this.createMpa()
  },
  methods: {createMpa(){
         // the GL namespace is BMapGL
        // Press and hold the right mouse button to modify the tilt and Angle
	     var map = new BMapGL.Map("allmap");    // Create a Map instance
	    map.centerAndZoom(new BMapGL.Point(116.404.39.915), 11);  // Initialize the map, set the center point coordinates and map level
	map.enableScrollWheelZoom(true);     // Enable mouse wheel zooming
     }
  }
}
</script>
Copy the code

Note that the code here needs to create the map after the component is hung, and note the vUE lifecycle

Run your code at this point and the map will be introduced successfully

How do you use trajectory animation in a VUE project

In the process of project development, for example, you need to observe a person’s walking route, walking process in real time. At this time we need to use trajectory animation on the map, according to different coordinates to set up the character or vehicle walking trajectory.

The specific code is as follows:

<template>
  <div class="patrol_area">
    <div id="allmap" style="height:600px; margin-top:5px;"></div>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard'.data(){
    return {
      path : [{
        'lng': 121.814224.'lat': 31.156484
        }, {
          'lng': 121.808547.'lat': 31.165754
        }, {
          'lng': 121.796186.'lat': 31.184848
        }, {
          'lng': 121.788353.'lat': 31.192015
        }, {
          'lng': 121.771752.'lat': 31.194734
        },
        {
          'lng':  121.74969.'lat': 31.189791
        },
        {
          'lng': 121.754217.'lat': 31.179658
        }, {
          'lng': 121.757523.'lat': 31.167794}].maps:' '.pls:' '}},mounted(){
    this.pathStart()
   
  },
  computed: {
    ...mapGetters([
      'name'])},methods: {// Create the map instance and set the moving path
      pathStart(){
          // the GL namespace is BMapGL
      // Press and hold the right mouse button to modify the tilt and Angle
        var map = new BMapGL.Map("allmap");    // Create a Map instance
        map.centerAndZoom(new BMapGL.Point(121.814224.31.156484), 17);  // Initialize the map, set the center point coordinates and map level
        map.enableScrollWheelZoom(true);     // Enable mouse wheel zooming
  
          var point = [];
          for (var i = 0; i < this.path.length; i++) {
              point.push(new BMapGL.Point(this.path[i].lng, this.path[i].lat));
          }
        var pl = new BMapGL.Polyline(point);
        
        this.maps = map
        this.pls = pl
        setTimeout(this.start, 3000);
   
         map.setHeading(64.5);
         map.setTilt(73);
      },
      // Create a trajectory animation object and configure the parameters
      start (){
        var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
              overallView: true.tilt: 30.duration: 20000.delay: 300}); trackAni.start(); }}}</script>
 
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px; }}</style>
Copy the code

Because the method in Baidu API is not applicable to VUE project, SO I changed it. Maps and PLS are used to store map objects and PL objects, because they are also used in our start. SetTimeout (this.start(map,pl), 3000); If we do this, the start method will execute immediately and our setTimeout will be useless. So instead, path is a location

This is the trajectory animation in the map

Welcome to correct, I hope to help you, welcome to discuss

Always learning, always stepping in the pit