Teilen Sie 2 Möglichkeiten zur Verwendung von Baidu Maps in Vue

Karte wird in dem Projekt häufig verwendet, und ich habe sie in letzter Zeit mehrmals verwendet und kann mich nicht einmal daran erinnern. In meiner Freizeit habe ich zwei Verwendungsmethoden zusammengestellt Baidu-Karte in Vue, um meine eigene Anzeige zu erleichtern und sie mit allen zu teilen, in der Hoffnung, den Bedürftigen zu helfen.

Die übliche Methode ist:

1.Einführen

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

2. Erstellen Sie eine neue Komponentenzuordnung

Hinweis: Nicht Benennen Sie die Komponentenkarte, denn wenn in HTML ein Karten-Tag vorhanden ist, wird ein Fehler

gemeldet. Fehler: Verwenden Sie keine integrierten oder reservierten HTML-Elemente als Komponenten-ID:map

3. Anschließend können Sie relevanten Code direkt zusammenstellen und schreiben

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

Eine andere Methode:

1 Erstellen Sie eine neue 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. Geben Sie bei Bedarf

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

in die Vue-Seite der verwendeten Karte ein. 3. Rufen Sie

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

Das obige ist der detaillierte Inhalt vonTeilen Sie 2 Möglichkeiten zur Verwendung von Baidu Maps in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!