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