How to introduce Baidu Map's jsApi under vue.js? Introduction to two methods of introducing Baidu Map's jsApi

This article introduces you to the article about how to introduce the jsApi of Baidu Map under vue.js? This introduction to the two methods of introducing Baidu Map's jsApi has a good reference value. I hope it can help friends in need.

Preface

Today there is a project that needs to use Baidu Map. Generally, when we use Baidu Map on the mobile terminal, we directly introduce the jsApi of Baidu Map in this way.

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

The principle of this method is to directly add a BMap object to the global window object, so that we can use Baidu Map's API anywhere on the page where the API has been loaded. But the introduction method alone is obviously not enough for projects developed with vue webpack using single-file components. So, I looked up information online. Two methods are found here.

Introducing script tags directly

The first method is through direct introduction. Of course, it is not enough to introduce script tags. If you want to use bmap objects in vue files, you also need to add them to webpack. In the configuration file, set the external extensions (externals attribute)

//webpack.dev.conf.js

externals: {
    'BaiduMap': 'BMap'
}

The official explanation of the externales attribute is:

Prevent certain imported packages from being packaged into the bundle, but in At runtime, these external dependencies are obtained from the outside.

The webpack documentation also gives an example: importing jQuery from a CDN instead of packaging it.
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(...);

Referring to this example, we can directly use Baidu Map’s API by introducing js files in our project .

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

}

Note here that instantiating the map api is best done in the mounted stage. If your dom uses official examples such as

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

, because only in the mounted stage, dom will be generated and mounted.

Method introduced through modularization

In fact, Baidu Map official has open sourced the corresponding open source components of vue and react based on jsApi last year. We can install them directly through npm and then use them.
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
You can refer to them at Use the documentation on github. Here we only introduce vue.
Installation

npm i vue-baidu-map --save

Initialization

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

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

Use

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

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

Related recommendations:

How does vue encapsulate components? How to encapsulate vue tab switching components (with code)

Detailed analysis of Vue custom instructions and instruction definition functions (code)

The above is the detailed content of How to introduce Baidu Map's jsApi under vue.js? Introduction to two methods of introducing Baidu Map's jsApi. For more information, please follow other related articles on the PHP Chinese website!