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，常用参数说明&文档

属性

事件

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

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

往期文章

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

个人主页

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

Vue2中百度地图API的使用