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

官方文档地址：https://dafrok.github.io/vue-baidu-map

1.安装：

npm i --save vue-baidu-map

2.全局初始化：

main.js文件import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {  ak: 'YOUR_APP_KEY' // 详见 http://lbsyun.baidu.com/apiconsole/key
})

3.具体界面：

<template><baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {data () {return {center: {lng: 0, lat: 0},zoom: 3}},methods: {handler ({BMap, map}) {console.log(BMap, map)this.center.lng = 116.404this.center.lat = 39.915this.zoom = 15}}
}
</script>

地图容器的实质是一个空的 DOM 节点，它可以用于挂载 BmView 组件或其它 DOM 节点或组件。如果你需要二次开发或手动控制其子组件，可以使用在 ready 事件中使用返回的 BMap 类和 map 实例进行手动控制。

4.实例属性

属性名	类型	默认值	描述
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.事件

事件名	参数	描述
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}	长按事件，仅适用移动设备

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

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图
为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScr ...
vue 使用百度地图（全景图）
安装 vue-baidu-map vue-jsonp 第一步 npm install vue-baidu-map --save main.js import BaiduMap from 'vue-ba ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
VUE使用百度地图插件
VUE使用百度地图插件实现功能百度地图的使用相关代码片段实现功能需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索百度地图的使用参考 Vue Bai ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...

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

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

最新文章

热门文章