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文件中
<template>
<div id="index">
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" />
</div>
</template>
<script>
export default {
name: 'Index',
components: {},
data() {
return {
center: { lng: 0, lat: 0 },
zoom: 0
}
},
created() {},
mounted() {},
methods: {
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 121.487899486
this.center.lat = 31.24916171
this.zoom = 15
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 500px;
height: 500px;
}
</style>
没问题的话现在已经可以在页面上看到上海市了
5，局部引入用法
在你的.vue文件中
<template>
<div id="index">
<baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler" />
</div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
name: 'Index',
components: {
BaiduMap
},
data() {
return {
ak: '你的key',
center: { lng: 0, lat: 0 },
zoom: 0
}
},
created() {},
mounted() {},
methods: {
handler({ BMap, map }) {
console.log(BMap, map)
this.center.lng = 121.487899486
this.center.lat = 31.24916171
this.zoom = 15
}
}
}
</script>
<style lang="less" scoped>
.map{
width: 500px;
height: 500px;
}
</style>
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
如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；
END
往期文章
个人主页