Wie führe ich die jsApi von Baidu Map unter vue.js ein? Einführung in zwei Methoden zur Einführung der jsApi von Baidu Map

Der Inhalt dieses Artikels befasst sich mit der Einführung der jsApi von Baidu Map unter vue.js. Diese Einführung in die beiden Methoden zur Einführung der jsApi von Baidu Map hat einen guten Referenzwert. Ich hoffe, dass sie Freunden in Not helfen kann.

Vorwort

Heute gibt es ein Projekt, das Baidu Map verwenden muss. Wenn wir Baidu Map auf dem mobilen Endgerät verwenden, führen wir die jsApi von Baidu Map im Allgemeinen direkt ein.

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

Das Prinzip dieser Methode besteht darin, ein BMap-Objekt direkt zum globalen Fensterobjekt hinzuzufügen, was es uns ermöglicht, die Baidu Map API überall auf der Seite zu verwenden, wo die API geladen wurde. Aber die Einführungsmethode allein reicht offensichtlich nicht für Projekte aus, die mit vue+webpack unter Verwendung von Einzeldateikomponenten entwickelt wurden. Also habe ich online nach Informationen gesucht. Hier gibt es zwei Methoden.

Führen Sie Skript-Tags direkt ein

Die erste Methode ist die direkte Einführung. Natürlich reicht es nicht aus, Skript-Tags einzuführen, wenn Sie Bmap-Objekte in Vue-Dateien verwenden möchten um sie im Webpack hinzuzufügen. Legen Sie in der Konfigurationsdatei die externen Erweiterungen (externals-Attribut) fest.

//webpack.dev.conf.js

externals: {
    'BaiduMap': 'BMap'
}

Das externales-Attribut stammt aus der offiziellen Erklärung:

verhindert, dass bestimmte importierte Pakete in das Bundle gepackt werden , aber zur Laufzeit werden diese externen Abhängigkeiten von außen abgerufen.

Die Webpack-Dokumentation enthält auch ein Beispiel für den Import von jQuery aus einem CDN, anstatt es zu verpacken.
index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

webpack.config.js

externals: {
  jquery: 'jQuery'
}

import $ from 'jquery';

$('.my-element').animate(...);

Bezugnehmend auf dieses Beispiel können wir die Baidu Maps API direkt verwenden, indem wir js-Dateien in unser Projekt einführen.

import BaiduMap from 'BaiduMap'
export default {
    name: 'Index',
    .....

mounted() {
        
    var map = new BaiduMap.Map('allmap')                        // 创建地图实例
    var point = new BaiduMap.Point(120.343373,31.540212)        // 创建中心点坐标
    var marker = new BaiduMap.Marker(point) // 创建标注

    map.centerAndZoom(point,15)                         // 初始化地图，设置中心点坐标和地图级别


    map.addOverlay(marker) // 将标注添加到地图中

}

Beachten Sie hier, dass die Instanziierung der Karten-API am besten in der gemounteten Phase erfolgt. Wenn Ihr Dom offizielle Beispiele wie

<p id="allmap"></p>

verwendet, wird Dom nur in der gemounteten Phase generiert und gemountet .

Durch Modularisierung eingeführte Methode

Tatsächlich hat Baidu Maps letztes Jahr die entsprechenden Open-Source-Komponenten von Vue und React basierend auf jsApi offiziell veröffentlicht. Wir können sie direkt über npm installieren und dann verwenden .
VUE:[https://github.com/Dafrok/vue...]
Reagieren:[https://github.com/huiyan-fe/...]
Sie können darauf verweisen sie unter Verwenden Sie die Dokumentation auf Github. Hier stellen wir nur vue vor.
Installieren

npm i vue-baidu-map --save

Initialisieren

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'    //这个地方是官方提供的ak密钥
})

Verwenden

<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
  width: 100%;
  height: 300px;
}
</style>

Verwandte Empfehlungen:

Wie kapselt Vue Komponenten? So kapseln Sie Vue-Tab-Switching-Komponenten (mit Code)

Detaillierte Analyse der benutzerdefinierten Vue-Anweisungen und Anweisungsdefinitionsfunktionen (Code)

Das obige ist der detaillierte Inhalt vonWie führe ich die jsApi von Baidu Map unter vue.js ein? Einführung in zwei Methoden zur Einführung der jsApi von Baidu Map. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!