--- theme: vue-pro highlight: agate --- # 1，前言 *** 记录一下Vue2项目中，百度地图API的简单使用。 # 2，申请账号，获取key *** 需要先申请百度账号，然后登陆[百度地图开放平台：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey](https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey)，按照流程，申请成为开发者，然后创建应用。 ![申请](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64af674a14274ce9b6ad2ae746d1b3ae~tplv-k3u1fbpfcp-zoom-1.image#?w=933\&h=253\&s=30296\&e=png\&b=ffffff) 应用类型选择`浏览器端`，Referer白名单填`*` ![创建项目](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e814da8d4fab4246a78ad3d66bfb062b~tplv-k3u1fbpfcp-zoom-1.image#?w=828\&h=835\&s=84931\&e=png\&b=ffffff) # 3，安装依赖 *** ```javascript npm i --save vue-baidu-map ``` # 4，全局引入用法 *** 先在main.js中引入 ```javascript import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你申请的key' }) ``` 然后在你的.vue文件中 ```html ``` 没问题的话现在已经可以在页面上看到上海市了 # 5，局部引入用法 *** 在你的.vue文件中 ```html ``` # 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](https://dafrok.github.io/vue-baidu-map/#/zh/index) **如果看了觉得有帮助的，我是@鹏多多，欢迎点赞关注评论； END** `往期文章` * [使用nvm管理node.js版本以及更换npm淘宝镜像源](https://juejin.cn/post/6953803916484018206) * [细数JS中实用且强大的操作符&运算符](https://juejin.cn/post/6921527102273650695) * [微信小程序实现搜索关键词高亮](https://juejin.cn/post/6944950213538742279) * [微信小程序request请求的封装](https://juejin.cn/post/6918983173770575880) * [javaScript中try和catch的使用和跳出forEach循环](https://juejin.cn/post/6942281834893934629) `个人主页` * [CSDN](https://blog.csdn.net/pdd11997110103?spm=1010.2135.3001.5421) * [GitHub](https://github.com/wp993080086) * [简书](https://www.jianshu.com/u/b7a8536bff06) * [博客园](https://www.cnblogs.com/-pdd/) * [掘金](https://juejin.cn/user/747323639737191)