一：插件的安装

$ 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	自动填充	输入关键词时，会自动填充内容

vue-baidu-map 百度地图的使用相关推荐

Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
Vue Baidu Map 实现Vue版本地图轨迹回放（App端）
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认关闭弹窗得到经纬度效果: vue baidu map api链接 : https://da ...
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...

vue-baidu-map 百度地图的使用

目录