Partagez 2 façons d'utiliser Baidu Maps dans Vue

La carte est beaucoup utilisée dans le projet, et je l'ai utilisée plusieurs fois récemment, je ne l'ai pas utilisée depuis longtemps et je ne m'en souviens même pas. Pendant mon temps libre, j'ai compilé deux méthodes d'utilisation. Baidu Map dans Vue pour faciliter ma propre visualisation et la partager avec tout le monde, dans l'espoir d'aider ceux qui en ont besoin.

La méthode courante est la suivante :

1.Introduire

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2 Créer une nouvelle carte de composants

Remarque : Ne nommez pas le composant map, car s'il y a une balise map en HTML, une erreur sera signalée

Erreur : Ne pas utiliser d'éléments HTML intégrés ou réservés comme composant id:map

3. Ensuite, vous pouvez directement assembler le composant et écrire le code correspondant

mounted(){
      var map = new BMap.Map('map')
      var point = new BMap.Point(108.840053, 34.129522)
      map.centerAndZoom(point, 14)
      //...
    }

Autre méthode :

1 Créer un nouveau map.js

.

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

2. Introduisez

import {MP} from './map.js'

dans la page de vue de la carte que vous devez utiliser 3. Appelez

data:{
    return{
        ak:'1287348913029483740293'//密钥
    }
},
mounted(){
    this.$nextTick(function(){
      var _this = this;
      MP(_this.ak).then(BMap => {
       //在此调用api
      })
    }
}

dans la page de vue

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!