vue 项目中百度地图 API 使用流程

三个木马人

已于 2022-06-23 14:16:09 修改

阅读量4.3k

点赞数 5

分类专栏：前端文章标签： vue.js 百度地图 BMap

于 2022-03-03 17:07:08 首次发布

本文链接：https://blog.csdn.net/weixin_43299180/article/details/123246071

版权

前端专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了如何在百度地图开放平台注册、创建AK，以及在项目中集成和使用地图功能，包括设置地图控件、添加事件监听、绘制覆盖物等。此外，还列举了百度地图提供的丰富功能，如常规控件、地图事件和各种覆盖物类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、在百度地图开放平台注册账号并登录、认证

1、网址：http://lbsyun.baidu.com/index.php?title=jspopularGL；
2、认证：认证方式分为个人认证和企业认证，这个需要根据自己的需要按照流程填写认证信息；

二、创建 ak

在 控制台 -> 应用管理 -> 我的应用 点击 创建应用 填写相关申请信息：
在这里插入图片描述
创建成功之后可以在应用列表查看自己申请的应用 ak

这个 ak 在开发过程中是必须的；

三、项目使用

1、在 index.html 中引入

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

这里 ak 是第二步申请的应用 ak，必填；

2、调用

<template>
	<div id="BDMap" stype="height:500px; overflow:hidden"></div>
</template>
<script>
export default {
	mounted(){
		this.map();
	},
	methods:{
		map(){
			//创建MAP实例，enableMapClick:false ：禁用地图默认点击弹框
			let map = new Bmap.Map("BDMap", { enableMapClick: false }); 
			//创建点坐标
			let point = new Point(116.404, 39.915);
			// 初始化地图,设置中心点坐标和地图级别
			map.centerAndZoom(point, 11); 
			// 添加地图类型控件
	      	map.addControl(new BMap.MapTypeControl({ 
		    	mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
		    }));
		    // 设置地图显示的城市 此项是必须设置的
		    map.setCurrentCity('北京'); 
		    // 开启鼠标滚轮缩放，不要的话注释掉着一行
		    map.enableScrollWheelZoom();
		}
	}
}
</script>

这里样式必须设置高度和 overflow：hidden，宽度根据自己需要设置；具体的需要根据自己的需求来添加不同的功能；

3、效果图
在这里插入图片描述

四、丰富的功能

百度地图提供了非常丰富的功能空间供我们使用：

1、常规功能

Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类你可以自定义控件；
NavigationControl：地图平移缩放控件，PC 端默认位于地图左上方，它包含控制地图的平移和缩放的功能；移动端提供缩放控件，默认位于地图右下方；
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图；
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系；
MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

2、地图事件
百度地图大部分 api 对象都含有 addEvemtListener 方法，我们可以用这个方法来自定义添加事件；同时也提供了 removeEventListener 事件来移除自定义的监听事件；

map.addEventListener('click',function(e){
	console.log(e)；
})
map.removeEventListener('click', 函数名)

3、地图覆盖物

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法；
Marker：标注表示地图上的点，可自定义标注的图标；
Label：表示地图上的文本标注，您可以自定义标注的文本内容；
Polyline：表示地图上的折线；
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外你也可以为其添加填充颜色；
Circle: 表示地图上的圆；
InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息；注意：同一时刻只能有一个信息窗口在地图上打开；

具体的功能可以直接参考百度地图 api 实例中心；