Vue uses Baidu Maps to realize city positioning

This article shares the specific code of Vue using Baidu Maps to realize city positioning for your reference. The specific content is as follows

Vue project running environment: Vue 2.0, Vue Cli 3.0

Step 1: Log in to Baidu Map Open Platform and create an application under Console ----> Application Management ----> My Application.

The purpose is to obtain ak

Step 2: In the index.html file in the public folder

Import Baidu Maps and add your ak

Step 3: Create a vue.config.js file in the root directory of the project

If there is a vue.config.js file, just add the following code.

The vue.config.js file is no longer created by default after VueCli 3.0 . When this file is used, we need to create it manually.

module.exports = {
  configureWebpack: {
    externals: {
      'BMap': 'BMap' // Baidu map configuration}
  }
}

Step 4: The next step is to implement the specific code.

Next, two implementation solutions are introduced.

Method 1 (recommended): separately encapsulate the js tool file to obtain the address.

1. Create a new util folder under the src folder, and then create a new getUserLocation.js file in the util folder.

Note: This util folder can store all your own encapsulated tool js files, not just the location-related file getUserLocation.js .

The code and screenshots are as follows:

// Get the current city const getCurrentCityName = function() {
  return new Promise((resolve, reject) => {
    let myCity = new BMap.LocalCity();
    myCity.get((result) => {
      let geoc = new BMap.Geocoder();
      geoc.getLocation(result.center, (rs) => {
        // rs carries all the location information, here we only get the city and the district
        let addComp = rs.addressComponents;
        let result = addComp.city + addComp.district;
        resolve(result);
      });
    }, {enableHighAccuracy: true});
  });
}
export default getCurrentCityName;

Introduce and call the methods encapsulated in the above files in the component

Method 1: Import tool files

The page can display location information through the locationMsg attribute, for example: Fengtai District, Beijing

Method 2: Position directly in the component.

You can use the following code directly in the component to successfully locate it. This method takes longer than method 1.

The code and screenshots are as follows:

mounted() {
    // Get location information this.getCity();
  },
  methods: {
    getCity() {
      const getLocation = new BMap.Geolocation();
      var _this = this;
      getLocation.getCurrentPosition((position) => {
        // position stores all positioning data console.log(position);
        // Here we get the city and province let city = position.address.city;
        let province = position.address.province;
        _this.locationMsg = province + city;
      }, () => {
        _this.locationMsg = 'Positioning failed!';
      }, {provider: 'baidu'});
    }
  }

Code Diagram

Note: The _this here is actually unnecessary, you can use this directly. Before using arrow functions, _this was used. Later, after changing to arrow functions, the code related to _this was not modified. Of course, there is no problem writing according to the above code.

If nothing unexpected happens, you can get the location information through the locationMsg attribute in the component.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.