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		当地图所有图块完成加载时触发此事件