最近开发需要使用地图来记录经纬度，就特意写一下自己的使用方法：
链接推荐
链接1:vue-baidu-map官网
链接2: vue-baidu-map文档

一：插件的安装

$ npm install vue-baidu-map --save

二：秘钥的注册

登录http://lbsyun.baidu.com/
2.1点击左上角的控制台
2.2点击管理应用中我的应用
2.3点击创建应用
2.4记录下ak（ak 就是百度地图的密钥）

三：插件的引入

3.1全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_KEY'
})

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
 
<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

3.2按需导入

按需导入相对来说是最好的，减少代码内存（组件请参考5.3）

import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker,BmNavigation} from 'vue-baidu-map'
 export default {
    components: {
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmNavigation,
    },
    data：function(){
      return {
      }
    }
}

<baidu-map v-bind:style="mapStyle" class="bm-view" ak="YOUR_KEY"
      :center="center" 
      :zoom="zoom" 
      :min-zoom="minZoom"
      :scroll-wheel-zoom="true" 
      @click="getClickInfo">
        <bm-view style="width: 100%; height:500px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </bm-marker>
        <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
            <input type="text" placeholder="请输入大致位置" class="serachinput">
          </bm-auto-complete>
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
      </baidu-map>

此时效果图如下

四:常见问题

4.1BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。

4.2没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。

4.3由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

五:属性

5.1实例属性

属性名	类型	默认值	描述
ak	String		百度地图开发者平台申请的密钥，仅在局部注册组件时声明。
center	Point, String		定位, 可使用如“广州市海珠区”的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoom	Number		缩放等级
min-zoom	Number		最小缩放级别
max-zoom	Number		最大缩放级别
high-resolution	Boolean	true	高分屏模式 该项仅在地图组件挂载时加载一次
map-click	Boolean	true	允许点击 该项仅在地图组件挂载时加载一次
map-type	String	global.BMAP_NORMAL_MAP	地图类型
dragging	Boolean	true	允许拖拽
scroll-wheel-zoom	Boolean	false	允许鼠标滚轮缩放
double-click-zoom	Boolean	true	允许双击缩放
keyboard	Boolean	true	允许键盘操作
inertial-dragging	Boolean	false	允许惯性拖拽
continuous-zoom	Boolean	false	允许无级缩放
pinch-to-zoom	Boolean	true	允许双指缩放
auto-resize	Boolean	true	允许自适应容器尺寸
mapStyle	MapStyle		自定义地图样式主题
theme	Array		自定义主题，是 mapStyle.styleJson 属性的别名，可能会在下一个主版本中 移除 ，不推荐使用

5.2事件

事件名	参数	描述
click	{type, target, point, pixel, overlay}	左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick
dblclick	{type, target, pixel, point}	鼠标双击地图时会触发此事件
rightclick	{type, target, point, pixel, overlay}	右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick
rightdblclick	{type, target, point, pixel, overlay}	右键双击地图时触发此事件
maptypechange	{type, target}	地图类型发生变化时触发此事件
mousemove	{type, target, point, pixel, overlay}	鼠标在地图区域移动过程中触发此事件
mouseover	{type, target}	鼠标移入地图区域时触发此事件
mouseout	{type, target}	鼠标移出地图区域时触发此事件
movestart	{type, target}	地图移动开始时触发此事件
moving	{type, target}	地图移动过程中触发此事件
moveend	{type, target}	地图移动结束时触发此事件
zoomstart	{type, target}	地图更改缩放级别开始时触发触发此事件
zoomend	{type, target}	地图更改缩放级别结束时触发触发此事件
addoverlay	{type, target}	当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
addcontrol	{type, target}	当使用Map.addControl()方法向地图中添加单个控件时会触发此事件
removecontrol	{type, target}	当使用Map.removeControl()方法移除单个控件时会触发此事件
removeoverlay	{type, target}	当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
clearoverlays	{type, target}	当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
addtilelayer	{type, target}	添加一个自定义地图图层时触发此事件
removetilelayer	{type, target}	移除一个自定义地图图层时触发此事件
load	{type, target, pixel, point, zoom}	调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件
touchstart	{type, target, point,pixel}	触摸开始时触发此事件，仅适用移动设备
touchmove	{type, target, point,pixel}	触摸移动时触发此事件，仅适用移动设备
touchend	{type, target, point,pixel}	触摸结束时触发此事件，仅适用移动设备
longpress	{type, target, point,pixel}	长按事件，仅适用移动设备

5.3各种功能组件

可以根据需求，按需导入以下的组件

事件名	属性	描述
BaiduMap	地图盒子	在vue中引入百度地图
BmScale	比例尺控件	在地图加入比例尺控件
BmNavigation	缩放控件	在地图加入比例尺控件
BmMapType	地图类型控件	在地图加入比例尺控件
BmOverviewMap	缩略图控件	在地图加入比例尺控件
BmGeolocation	定位控件	在地图加入比例尺控件
BmCopyright	版权控件	在地图加入比例尺控件
BmCityList	城市选择控件	在地图加入城市选择
BmPanorama	全景控件	在地图加入全景
BmControl	自定义控件	在地图加入自定义
BmMarker	点覆盖物	在地图中心添加点标记
BmPointCollection	海量点覆盖物	在地图上添加多个点标记
BmPolyline	折线覆盖物	在地图中添加可编辑的折线
BmPolygon	多边形覆盖物	在地图中添加可编辑的多边形
BmCircle	圆形覆盖物	在地图中添加圆形
BmGround	地面覆盖物	在地图中添加地面图层
BmLabel	标签覆盖物	在地图中添加一个自定义的文本标签
BmInfoWindow	信息窗体覆盖物	在地图中添加一个信息窗体
BmOverlay	自定义覆盖物	自定义覆盖物组件是一个高度订制化的组件
BmLocalSearch	地区检索	对一个地图实例进行地区检索
BmTransit	公交路线规划	检索AA到BB的公交路线规划
BmWalking	步行路线规划	检索AA到BB的步行路线规划
BmDriving	驾车路线规划	查询AA到BB的驾车路线规划
BmBus	公交路线检索	查询深圳XX路公交车途径路线
BmContextMenu	上下文菜单	在地图中插入一个上下文菜单
BmContextMenuItem	菜单项	菜单项是右键菜单的子组件，请勿在其他组件中使用。
BmBoundary	行政区划	在地图中添加深圳市南山区行政区划范围
BmAutoComplete	自动填充	输入关键词时，会自动填充内容