So verwenden Sie Baidu Map in Vue

Dieses Mal zeige ich Ihnen, wie Sie Baidu Map in Vue verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Baidu Map in Vue? sehen. .

In einem aktuellen Projekt war es notwendig, eine bestimmte Adresse in den Breiten- und Längengrad des Baidu-Koordinatensystems umzuwandeln. Die Anforderungen waren relativ einfach, daher wurde das Baidu Vue-Plugin in GitHub nicht verwendet.

Posten Sie ohne weitere Umschweife 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 für die Verwendung von Baidu Maps erforderlich sind Ab diesem Zeitpunkt können Sie Baidu Maps normal verwenden.

Nach vielen Untersuchungen haben wir schließlich herausgefunden, dass die Ursache dafür die Seitenladesequenz ist. Weitere Informationen finden Sie in der offiziellen Dokumentation

Da ich vue2.0 verwende, habe ich die folgenden zwei Methoden in der montierten 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. Für weitere spannende Inhalte zahlen Sie bitte Aufmerksamkeit für PHP Chinesisch Weitere verwandte Artikel online!

Empfohlene Lektüre:

Wie Vue CDN nutzt, um das Laden des ersten Bildschirms zu optimieren

Ich kann es mir nicht leisten, v- zu verwenden. in vuejs anzeigen Was sind die Gründe für die Wirkung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Baidu Map in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!