百度地图JavaScript API是由JavaScript语言编写的应用程序接口，支持HTTP和HTTPS，免费对外开放。在使用前，需先申请密钥（ak）才可使用。主要分为两种类型的版本：
①JavaScript API GL（使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图）；
②JavaScript API（最新的为v3.0，主要支持2D平面地图，接口使用无次数限制）。
（ 创建完成后，即可得到对应的AK，这里需要注意：因新系统升级，自公告之日起，“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择“浏览器端AK”，例如JavaScript API只支持浏览器类型AK。）
我们可以在官网主页的导航栏选择【开发文档】→【JavaScript API】，自行进行学习，进行HTMl网页地图的设计与配置。
实现一个最简单的显示出百度地图的网页代码（这里使用的是Map2.0版本的API）：
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>BaiduMap_Hello</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥（浏览器端）">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,30);
</script>
</body>
</html>
运行上面代码结果图：
这里需要注意，如果直接安装官网示例来写，可能会出现运行结果为空白的情况，是由于引用百度地图API文件版本类型引用方式的问题。解决：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
官网学习：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
map.addControl(new BMap.MapTypeControl());// 添加地图类型切换控件
map.addControl(new BMap.ScaleControl());// 添加比例尺控件
map.addControl(new BMap.CityListControl()); //添加城市选择列表控件
map.addControl(new BMap.ZoomControl());// 添加缩放控件
需要使用WebGL版本的地图API，其引用方式如下：
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>
GL版命名空间为BMapGL，示例：const map = new BMapGL.Map(‘container’);
// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("container");// 创建Map实例
map.centerAndZoom(new BMapGL.Point(112.92, 27.91), 19); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.setHeading(64.5);
map.setTilt(73);
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
个性化地图，顾名思义用户可对地图进行个性化配置。通过该服务，允许用户将传统默认的地图样式按需配置，自由控制地图元素显隐及对应的元素样式。
用户可以通过个性化地图样式编辑器，按需编辑地图的底图样式，再按相应应用端的功能要求，将样式应用在JavaScript API和地图SDK中。
map.setMapStyleV2({
styleId: '73bcfca1ca6693eec2bb63e2d666af4d'
});
https://lbs.baidu.com/index.php?title=jspopular3.0/openlibrary