How to use Baidu Map in Vue

This time I will show you how to use Baidumap in Vue. What are the precautions for using Baidu map in Vue. Here are practical cases. 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.

Without further ado, 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 Maps normally.

After many investigations, we finally found that the cause of this is the page loading sequence. This is also prompted 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 php Chinese websites. related articles!

Recommended reading:

How Vue uses CDN to optimize first screen loading

Can’t afford to use v-show in vuejs What are the reasons for the effect

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