Vue2中百度地图API的使用

目录

1,前言


记录一下Vue2项目中,百度地图API的简单使用。

2,申请账号,获取key


需要先申请百度账号,然后登陆百度地图开放平台:https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey,按照流程,申请成为开发者,然后创建应用。

Vue2中百度地图API的使用

应用类型选择浏览器端,Referer白名单填*

Vue2中百度地图API的使用

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

Vue2中百度地图API的使用

往期文章

个人主页

上一篇:vue2开发中遇到的一些问题


下一篇:【Vue学习记录 3 】Webpack、Vue2框架介绍、router路由