Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Baidu Map in Vue

php中世界最好的语言
Freigeben: 2018-04-11 13:58:18
Original
1931 Leute haben es durchsucht

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();
    };
  }
}
Nach dem Login kopieren

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); //创建点坐标, 地图必须经过初始化才可以执行其他操作
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage