Detailed explanation of the steps to call Baidu map in Vue

This time I will bring you a detailed explanation of the steps for calling Baidu map in Vue, and what are the precautions for calling Baidu map in Vue. Here is a practical case, let’s take a look.

I would like to share with you a simple method of using Baidu Maps under Vue. The details are as follows:

In a recent project, it is necessary to convert a specific address into the longitude and latitude of Baidu coordinate system. The requirements are relatively simple. , so the Baidu Vue plug-in in GitHub is not used.

Don’t talk nonsense, just post the code:

Introduction: Directly introduce

export default {
  methods: {
    loadBMapScript () {
      let script = document.createElement('script');
        script.src = 'http://api.map.baidu.com/api?v=3.0&ak=你的akKey&callback=bMapInit';
        document.body.appendChild(script);
    },
    qeuryLocation () {
      let myGeo = new BMap.Geocoder();
        // 地址转换成坐标系
        myGeo.getPoint('北京市海淀区上地10街10号', function (point) {
          if (point) {
            console.log(point);
          }
        },
        '北京市');
    }
  },
  mouted () {
    this.loadBMapScript();
    window['bMapInit'] = () => {
      this.qeuryLocation();
    };
  }
}

into the components that need to use Baidu Maps. At this point, you can start using Baidu normally. Map.

According to the code written in the official documentation, the following error was reported:

After many investigations, it was finally discovered that the cause of this was the page loading sequence. , there are also tips on the official website. Please check the official documentation for details.

Since I am using vue2.0, I called the following two methods in the mounted method:

var map = new BMap.Map("container");  //创建地图实例，注意在调用此构造函数时应确保容器元素已经添加到地图上
var point = new BMap.Point(116.404, 39.915); //创建点坐标， 地图必须经过初始化才可以执行其他操作

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of unit testing and E2E testing steps with Angular CLI

##The difference between computed and methods in Vue

The above is the detailed content of Detailed explanation of the steps to call Baidu map in Vue. For more information, please follow other related articles on the PHP Chinese website!