Vue2中百度地图API的使用

目录

• 1，前言
• 2，申请账号，获取key
• 3，安装依赖
• 4，全局引入用法
• 5，局部引入用法
• 6，常用参数说明&文档

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		左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick
dblclick		鼠标双击地图时会触发此事件
dragstart		开始拖拽地图时触发
dragging		拖拽地图过程中触发
dragend		停止拖拽地图时触发
resize		地图可视区域大小发生变化时会触发此事件
hotspotclick		点击热区时触发此事件
hotspotover		鼠标移至热区时触发此事件
hotspotout		鼠标移出热区时触发此事件
tilesloaded		当地图所有图块完成加载时触发此事件

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

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

往期文章

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

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金