vue使用百度地图api(vue-baidu-map)

1.安装vue-baidu-map组件

npm install vue-baidu-map --save
           

2.在main.js中注册vue-baidu-map

3.1 申请ak

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你的申请的ak'
})
           

3.使用

<template>
  <baidu-map class="map" center="北京"></baidu-map>
</template>
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>
           

4.效果图

vue-baidu-map文档：

https://dafrok.github.io/vue-baidu-map/#/zh/start/usage