Comment utiliser Baidu Map dans Vue

Cette fois, je vais vous montrer comment utiliser Baidu Map dans Vue. Quelles sont les précautions pour utiliser Baidu Map dans Vue. Prenons un cas pratique. regarder. .

Dans un projet récent, il était nécessaire de convertir une adresse spécifique en latitude et longitude du système de coordonnées Baidu. Les exigences étaient relativement simples, le plug-in Baidu Vue dans GitHub n'a donc pas été utilisé.

Sans plus attendre, postez simplement le code :

Introduction : introduisez directement

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();
    };
  }
}

dans les composants qui doivent utiliser Baidu Maps À ce stade, vous pouvez commencer à utiliser Baidu Maps normalement.

Après de nombreuses enquêtes, nous avons finalement découvert que la cause de ce problème était la séquence de chargement des pages. Ceci est également demandé sur le site officiel. Pour plus de détails, veuillez consulter la documentation officielle

. Depuis que j'utilise vue2.0, j'ai appelé les deux méthodes suivantes dans la méthode montée :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez payer. attention au php chinois Autres articles connexes en ligne !

Lecture recommandée :

Comment Vue utilise CDN pour optimiser le chargement du premier écran

Je ne peux pas me permettre d'utiliser v- show in vuejs Quelles sont les raisons de l'effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!