Detaillierte Erläuterung der Schritte zum Aufrufen der Baidu-Karte in Vue

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Aufrufen von Baidu Map in Vue. Was sind die Vorsichtsmaßnahmen für den Aufruf von Baidu Map in Vue? , lass uns einen Blick darauf werfen.

Ich möchte Ihnen eine einfache Methode zur Verwendung von Baidu Maps unter Vue vorstellen. Die Details sind wie folgt:

In einem aktuellen Projekt ist es notwendig, eine bestimmte Adresse in die umzuwandeln Die Anforderungen für den Längen- und Breitengrad des Baidu-Koordinatensystems sind relativ einfach, daher wird das Baidu Vue-Plugin in GitHub nicht verwendet.

Reden Sie keinen Unsinn, posten Sie einfach den Code:

Einführung: Führen Sie

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

direkt in die Komponenten ein, die Baidu Maps verwenden müssen Beginnen Sie mit der normalen Verwendung von Baidu.

Laut dem in der offiziellen Dokumentation geschriebenen Code wurde der folgende Fehler gemeldet:

Nach vielen Untersuchungen wurde schließlich die Ursache dafür entdeckt war die Reihenfolge beim Laden der Seite. Weitere Informationen finden Sie in der offiziellen Dokumentation.

Da ich vue2.0 verwende, habe ich die folgenden zwei Methoden in der gemounteten Methode aufgerufen:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Unit-Tests und E2E-Testschritte mit Angular CLI

Der Unterschied zwischen berechnet und Methoden in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Aufrufen der Baidu-Karte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!