带你撬开百度地图API的大门
背景
给甲方做项目, 我们公司的H5应用一直使用的是腾讯地图（组内别的成员负责开发的，我对这一块知之甚少）, 而甲方之前别的应用采购了百度地图，虽说腾讯地图目前不收费，难保以后不收费，甲方不想采购两套地图。应甲方要求，需要将H5应用中的腾讯地图替换成百度地图,由此我也开始了一场学习在H5应用中使用百度地图之旅。
第一站 注册开发者账号
首先你得有一个百度账号，才能登陆百度地图开放平台，由于我在百度App上注册过账号，所以无需再次注册。然而我打开百度App，打算扫码登陆百度地图开放平台时，却发现百度App的扫码功能入口藏得有点深,找了半天才找到。入口是拍照图标，进入之后底部默认是识万物功能，需要向左滑动，才是扫码功能。
进入注册页，开发者类型选择个人开发者，点击成为个人开发者按钮,开始注册，按部就班，勾选协议，填写个人信息，做人脸识别。
有一个必填项是应用场景，不能少于100字, 我东拼西凑了100字。
主要的应用场景有：
- 在h5移动端端，发起定位，获取当前打开页面者的位置信息。
- 在PC端发起定位，获取当前登陆者的位置信息
- 在PC端，可以在地图上移动选择地址，校正定位带来的误差
- 在移动端，可以把PC端的经纬度数值转换成具体的地址
账号注册成功后，会跳转到百度地图开放平台首页,点击控制台
第二站 创建应用,获取AK
进入控制台--应用管理--我的应用下面，创建应用。
我们创建一个浏览器端的学习demo应用, 启用服务选择提供的所有服务，Referer白名单填写*号,不限制域名
注册成功之后，会生成一个App Key, 这个AK贯穿你使用百度地图Api的始终。
另外, 百度地图对个人认证用户, 绝大多数Api每天调用的限制次数是5000次, 每秒钟只能查询30次。用于学习的话，够用了。
第三站 调用百度地图功能
3.1 展示地图
在E盘study/baidu-map文件夹下创建一个index.html文件,内容如下:
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=申请的AppKey"></script>
</head>
<body>
<div class = "info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
// 创建地图容器
var map = new BMapGL.Map('container');
// 初始化地图,设置中心点坐标和地图级别，中心坐标设置的是天安门
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12);
// 使能鼠标滚轮缩放地图功能
map.enableScrollWheelZoom(true);
</script>
3.2 启动运行
安装静态服务器
npm install -g http-server
启动静态服务
http-server e:/study/baidu-map
3.3 效果图
下面这张地图都可以移动和放大。
3.4 定位标注功能
再看一个vue3版本，实现获取位置并在地图上进行标注的功能。注意：第一次同意获取位置信息授权也会提示失败，之后运行正常。
<template>
<div id="baidu-map-box"></div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
onMounted(() => {
const map = mapInit();
getLocation(map);
});
const mapInit = () => {
var map = new BMapGL.Map('baidu-map-box');
// 绘制地图,中央点设置为北京天安门
var point = new BMapGL.Point(116.331398, 39.897445);
map.centerAndZoom(point, 12);
return map;
};
// 获取定位，需要授权
const getLocation = (map) => {
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 在地图上添加坐标
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// 将经纬度解析成地址
parseLngLat(r.point);
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
} else {
alert('failed' + this.getStatus());
}
});
};
// 解析经纬度为具体的地址
const parseLngLat = ({ lng, lat }) => {
// 创建地理编码实例
var myGeo = new BMapGL.Geocoder();
// 根据坐标得到地址描述
myGeo.getLocation(new BMapGL.Point(lng, lat), function (result) {
if (result) {
alert(result.address);
}
});
};
</script>
<style scoped>
#baidu-map-box {
height: 100%;
}
</style>
有两点要说明一下:
- 定位出来的经纬度说明
定位出来的经纬度不是GPS的经纬度，而是百度坐标系的经纬度。不是通用的，使用其它地图时，需要转换。 官方文档是这样说的:
目前国内主要有以下三种坐标系：
WGS84：大地坐标系，也称国际标准。是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。也称中国坐标偏移标准，Google Map、高德、腾讯使用
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。
非中国地区地图，服务坐标统一使用WGS84坐标
需要转换时，请参考
/**
* 将腾讯、高德地图经纬度转换为百度地图经纬度
* @param lng 经度
* @param lat 纬度
*/
const qqGDMapToBMap=({lng, lat})=>{
let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
let x = lng;
let y = lat;
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta) + 0.0065;
let lats = z * Math.sin(theta) + 0.006;
return {
lng: lngs,
lat: lats,
};
}
/**
* 将百度地图经纬度转换为腾讯、高德地图经纬度
* @param lng 经度
* @param lat 纬度
*/
const bMapToQQGDMap=({lng, lat})=>{
let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
let x = lng - 0.0065;
let y = lat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
let lngs = z * Math.cos(theta);
let lats = z * Math.sin(theta);
return {
lng: lngs,
lat: lats,
};
}
另外，看到这里，大家可能觉得百度地图在国际上不通用，出国之后应该使用高德地图。然而笔者以前去过日本，发现在日本，高德地图不能使用，高德地图只提供国内导航服务，这个时候才发现冲出中国的是百度地图，百度地图才是中国地图界的一哥呀。
- 百度地图api手册查找
对于刚学习百度地图Api用法的小白而言，相信你也和我一样，肯定不知道上面示例，或者官方展示的demo示例代码片段中Api的作用及传参含义，比如说centerAndZoom这个方法的传参含义及参数的约束条件，贴心的楼主已经给你把链接放在文中了， 请点击这里
最后
师傅领进门，学艺在个人。这扇门已经打开，就不要浅尝辄止，轻易的关闭它，探索一下更多更好玩，更实用的功能吧。若想玩转百度地图开放的其它高级功能的话，请移步JavaScript API GL继续深入学习。
