Comment introduire le jsApi de Baidu Map sous vue.js ? Introduction à deux méthodes d'introduction du jsApi de Baidu Map

Le contenu de cet article explique comment introduire le jsApi de Baidu Map sous vue.js ? Cette introduction aux deux méthodes d'introduction du jsApi de Baidu Map a une bonne valeur de référence. J'espère qu'elle pourra aider les amis dans le besoin.

Avant-propos

Aujourd'hui, il existe un projet qui doit utiliser Baidu Map. Généralement, lorsque nous utilisons Baidu Map sur le terminal mobile, nous introduisons directement le jsApi de Baidu Map de cette manière.

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

Le principe de cette méthode est d'ajouter directement un objet BMap à l'objet global window, ce qui nous permet d'utiliser l'API Baidu Map n'importe où sur la page où l'API a été chargée. Mais la méthode d'introduction seule n'est évidemment pas suffisante pour les projets développés avec vue+webpack utilisant des composants mono-fichier. J'ai donc cherché des informations en ligne. Deux méthodes se trouvent ici.

Introduire directement les balises de script

La première méthode consiste à procéder à une introduction directe. Bien sûr, il ne suffit pas d'introduire des balises de script. Si vous souhaitez utiliser des objets bmap dans les fichiers vue, vous en avez également besoin. pour les ajouter dans webpack Dans le fichier de configuration, définissez les extensions externes (attribut externals)

//webpack.dev.conf.js

externals: {
    'BaiduMap': 'BMap'
}

L'explication officielle de l'attribut externales est :

pour empêcher certains packages importés d'être empaquetés dans le bundle, et il s'agit d'obtenir ces dépendances externes (dépendances externes) de l'extérieur au moment de l'exécution.

La documentation du webpack donne également un exemple d'importation de jQuery à partir d'un CDN au lieu de l'empaqueter.
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(...);

En référence à cet exemple, nous pouvons introduire des fichiers js dans notre projet et utiliser directement Baidu Maps API.

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) // 将标注添加到地图中

}

Notez ici qu'il est préférable d'instancier l'API de carte dans la scène montée si votre DOM utilise des exemples officiels tels que

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

car uniquement dans la scène montée. , le dom sera généré et monté.

Méthode introduite par la modularisation

En fait, Baidu Maps a officiellement ouvert l'année dernière les composants open source correspondants de vue et de réaction basés sur jsApi. Nous pouvons les installer directement via npm puis les utiliser.
VUE :[https://github.com/Dafrok/vue...]
React :[https://github.com/huiyan-fe/...]
Vous pouvez vous référer à les à Utilisez la documentation sur github. Ici, nous introduisons uniquement vue.
Installation

npm i vue-baidu-map --save

Initialisation

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

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

Utilisation

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

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

Recommandations associées :

Comment vue encapsule-t-elle les composants ? Comment encapsuler les composants de commutation d'onglet Vue (avec code)

Analyse détaillée des instructions personnalisées Vue et des fonctions de définition d'instructions (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!