百度地图API初体验记录
第一步 注册开发者账号
打开百度地图开放平台,进入注册页,开发者类型选择个人开发者,点击成为个人开发者按钮,开始注册,按部就班,勾选协议,填写个人信息,做人脸识别(可用百度APP)。
其中,有一个必填项是应用场景,不能少于100字,我是从网上借鉴别人的。
主要的应用场景有:
- 在h5移动端端,发起定位,获取当前打开页面者的位置信息。
- 在PC端发起定位,获取当前登陆者的位置信息
- 在PC端,可以在地图上移动选择地址,校正定位带来的误差
- 在移动端,可以把PC端的经纬度数值转换成具体的地址
账号注册成功后,会跳转到百度地图开放平台首页,点击控制台
第二步 创建应用,获取AK
进入控制台–应用管理–我的应用下面,创建应用。
创建一个浏览器端的学习demo应用,启用服务选择提供的所有服务,Referer白名单填写*号,不限制域名
注册成功之后,会生成一个App Key,这个AK贯穿你使用百度地图Api的始终。
第三步 调用百度地图功能
3.1展示地图
3.1.1 js代码
在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.1.2启动运行
3.1.2.1 安装node.js
1.双击安装包,一直点击下一步,直至安装成功即可
node.js安装步骤参考文档
更换npm源为淘宝镜像参考文档
2.【win+R】键,输入cmd,进入命令提示符窗口,分别输入
node -v 显示安装的nodejs版本
npm -v 显示安装的npm版本
命令,显示版本号,则安装成功,如图。
3.1.2.2 启动运行
安装静态服务器
npm install -g http-server
启动静态服务
http-server e:/study/baidu-map
3.1.3 效果图
3.2添加控件
3.2.1js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 1300px;
height: 600px;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=百度申请的AppKey"></script>
</head>
<body>
<div id="container"></div>
<script>
//1.创建地图实例
var map = new BMap.Map("container");
//2.设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点
var point = new BMap.Point(116.404, 39.915);
//3.地图初始化,同时设置地图展示级别 (3-19)
map.centerAndZoom(point, 15);
//4.鼠标滚轮 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//5.添加控件
//平移缩放控件 NavigationControl PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能
map.addControl(new BMap.NavigationControl());
//比例尺 ScaleControl 默认位于地图左下方,显示地图的比例关系
map.addControl(new BMap.ScaleControl());
//缩略地图 OverviewMapControl 默认位于地图右下方,是一个可折叠的缩略地图
map.addControl(new BMap.OverviewMapControl());
//地图类型 MapTypeControl 默认位于地图右上方
map.addControl(new BMap.MapTypeControl());
var opts = {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
type: BMAP_NAVIGATION_CONTROL_SMALL //类型
}
map.addControl(new BMap.NavigationControl(opts));
</script>
</body>
</html>
3.2.2效果展示
3.3标注
3.3.1js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#container {
width: 1300px;
height: 600px;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=百度申请的AppKey"></script>
</head>
<body>
<div id="container"></div>
<script>
// 创建地图实例
var map = new BMapGL.Map("container");
//设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点
var point = new BMapGL.Point(116.404, 39.915);
//地图初始化 同时设置地图的级别(3-19)
map.centerAndZoom(point, 15);
//鼠标滚轮 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
//添加标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker); // 将标注添加到地图中
//添加监听事件
marker.addEventListener("click", function() {
alert("您点击了标注");
});
</script>
</body>
</html>
3.3.2效果展示
也可以自定义标注
3.4信息窗口
3.4.1js代码
//InfoWindow信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息
//注意:同一时刻只能有一个信息窗口在地图上打开
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello World" // 信息窗口标题
}
// 创建信息窗口对象
var infoWindow = new BMapGL.InfoWindow("你好 世界", opts);
// 打开信息窗口 地图的中心位置map.getCenter()
// map.openInfoWindow(infoWindow, map.getCenter());
map.openInfoWindow(infoWindow, point)
//点击marker标注——打开信息窗口
marker.addEventListener('click', function() {
map.openInfoWindow(infoWindow, point);
})
3.4.2效果展示
3.5正/逆地址解析
3.5.1js代码
// 地址解析服务提供从地址转换到经纬度的服务,反之,逆地址解析则提供从经纬度坐标转换到地址的转换功能。
var myGeo = new BMapGL.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint('湖南省长沙市岳麓区岳麓书院', function(point) {
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMapGL.Marker(point, {
title: '湖南省长沙市岳麓区'
}))
} else {
alert('您选择的地址没有解析到结果!');
}
}, '湖南省');
3.5.2效果展示
更多学习 JavaScript API GL
参考文章
[1] : 带你撬开百度地图API的大门
[2] : Node.js最新最详细安装教程(2020)
[3] : Nodejs安装教程
[4] : 百度地图API的使用教程以及案例