百度地图-新手入门教程

最新推荐文章于 2025-10-14 11:45:56 发布

原创

最新推荐文章于 2025-10-14 11:45:56 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#百度 #前端

本文介绍了百度地图，其具备北斗定位和企业级可视化服务解决方案。详细给出使用教程，包括注册登陆、创建应用获取密钥等步骤，还说明了使用地图的具体操作。此外，讲解了在Vue中使用百度地图的方法，如引入script、配置路由等，强调学会用官网教程很重要。

百度地图介绍

LBS:location Bussiness Server 基本地理位置的服务开发
百度地图的北斗定位，可以让开发者轻松实现安全、精准、稳定的定位功能，企业级可视化服务解决方案，实现点线面数据一站式上图，推进业务数字化、可视化、智能化管理。

百度地图使用教程

注册并登陆
进入百度开发官网任意点击开发文档或者控制台进行新手注册并登陆
点击百度开发官方
创建应用获取密钥AK

如何创建应用
tip:白名单中，如果只是进行测试那么就加*，如果是部署到服务器需要上传网址
获取密钥（AK）
创建应用提交之后会出现一个新增的AK也就是所谓的密钥
这样就可以使用啦

使用百度地图

使用步骤

第一步：引入地图

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥">

第二步：创建地图容器

<div id="container"></div>

第三步：定义盒子的大小

//设置盒子大小以及隐藏logo和版权
        #container {
   
   
            margin: 100px auto;
            width: 500px;
            height: 300px
        }
        /* 百度地图版权 */
        .BMap_cpyCtrl {
   
   
            display: none;
        }
        /* 百度地图logo */
        .anchorBL {
   
   
            /* display: none; */
        }

第四步：在 script 中设置地图详细内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
   
   
				width: 800px;
				height: 600px;
			}
		</style>
		<script type="text/javascript"
			src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<script>
		var map = new BMapGL.Map("container"); //实例化
		var point = new BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
		map.centerAndZoom(point, 15); //设置中心点和缩放级别
		map.enableScrollWheelZoom(true) //true滚轮可以缩放
		//添加控件
		var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
		map.addControl(scaleCtrl);
		var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
		map.addControl(zoomCtrl);
		var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
		map.addControl(cityCtrl);
	</script>
</html>

添加控件代码效果图 在这里插入图片描述

设置地图—绘制地图样式（点、线、面）要学会在官网查找教程

在这里插入图片描述
点、线、面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
   
   
				width: 800px;
				height: 600px;
			}
		</style>
		<script type="text/javascript"
			src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
		</script>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<script>
		var map = new BMapGL.Map("container");

最低0.47元/天解锁文章