Vue Baidu Map ——学习笔记（一）安装和初步使用

前言

项目中要使用到百度地图，但是要在vue中写，但是又不想用官网给的api在html上写的方式，想用组件化的方式感觉要高端一点，这里就记一下，以便于自己后面阅读，如有什么差错，各位大佬海涵并纠正哟。

引入

1、安装

npm install vue-baidu-map --save

我用的项目直接就全局注册了，不想整局部注册这些花里胡哨的东西。

2、main.js加入

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

Vue.use(BaiduMap, {
  // ak 就是百度开发者后台哪里有，粘贴过来
  ak: '******************************'
})

初步使用体验

<template>
  <baidu-map class="map" center="北京">

  </baidu-map>
</template>
<script>
    export default {
        name:'mapCont'
    }
</script>
<style>
.map {
  width: 100%;
  position: absolute;
  height: 100%;
}
</style>

由于是组件，我想使地图所在的子组件充满它所在的父组件，在给这个map加上position属性就好了

下一章：Vue Baidu Map ——学习笔记（二）基本的一些方法属性