How to call Baidu map in Vue

This time I will show you how to call Baidu Map in Vue, and what are the precautions for how to call Baidu Map in Vue. The following is a practical case, let's take a look.

In a recent project, it was necessary to convert a specific address into the latitude and longitude of the Baidu coordinate system. The requirements were relatively simple, so the Baidu Vue plug-in in GitHub was 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:

jQuery Enter trigger button event (with code)

How Angular CLI uses blueprint to generate code

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