详解vue.js下引入百度地图jsApi的两种方法

2020-06-14 06:19:12易采站长站整理

实际上百度地图官方去年已经开源了基于jsApi的vue和react的对应开源组件,我们可以直接通过npm安装,然后使用。

VUE:https://github.com/Dafrok/vue-baidu-map

React: https://github.com/huiyan-fe/react-bmap

可参考它们在github上面的文档进行使用。这里只介绍下vue的。

安装


npm i vue-baidu-map --save

初始化


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

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

使用


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

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