Vue2中百度地图API的使用

1，前言

---

记录一下Vue2项目中，百度地图API的简单使用。

2，申请账号，获取key

---

需要先申请百度账号，然后登陆百度地图开放平台：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey，按照流程，申请成为开发者，然后创建应用。

申请

应用类型选择浏览器端，Referer白名单填*

创建项目

3，安装依赖

---

npm i --save vue-baidu-map

4，全局引入用法

---

先在main.js中引入

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你申请的key' })

然后在你的.vue文件中

没问题的话现在已经可以在页面上看到上海市了

5，局部引入用法

---

在你的.vue文件中

6，常用参数说明&文档

---

属性

属性名	类型	默认值	描述
ak	String	无	百度地图开发者平台申请的密钥，仅在局部注册组件时声明
center	Point, String	无	定位, 可使用如"广州市海珠区"的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度
zoom	Number	无	缩放等级
min-zoom	Number	无	最小缩放级别
max-zoom	Number	无	最大缩放级别
map-click	Boolean	true	允许点击 该项仅在地图组件挂载时加载一次
dragging	Boolean	true	允许拖拽
scroll-wheel-zoom	Boolean	true	允许鼠标滚轮缩放

事件

事件名	参数	描述
click	{type, target, point, pixel, overlay}	左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick
dblclick	{type, target, pixel, point}	鼠标双击地图时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

---

如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END

往期文章

• 细数JS中实用且强大的操作符&运算符
• 微信小程序request请求的封装
• 使用nvm管理node.js版本以及更换npm淘宝镜像源

个人主页

• CSDN
• GitHub
• 博客园
• 掘金