vue项目引入百度地图简单使用

在vue项目中使用百度api展示地图组件

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

1.获取百度地图秘钥

http://lbsyun.baidu.com/apiconsole/key

2.在vue项目中安装百度地图插件

$ npm install vue-baidu-map --save

3.在main.js文件中注册vue-baidu-map组件,这里就直接全局注册了

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

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'	// ak 是在百度地图开发者平台申请的密钥
})

4.在页面中使用

<template>
  <baidu-map
    class="bm-view"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
  ></baidu-map>
</template>

<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 1, //地图展示级别
    };
  },
};
</script>

<style>
.bm-view {
  width: 500px;
  height: 500px;
}
</style>

注：由于最近项目需要使用，记录学习一下！