最近开发需要使用地图来记录经纬度，就特意写一下自己的使用方法：
链接推荐
链接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 | 自动填充 | 输入关键词时，会自动填充内容 |