一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
正好趁着掘金的更文活动将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式
1. 百度开发者账户申请
具体可以参考这里：lbsyun.baidu.com/index.php?t…
最后当你的应用创建好了，就会得到一个服务密钥
然后这里是百度地图的API：mapopen-pub-jsapi.bj.bcebos.com/jsapi/refer…
2. 实际案例
第一步是需要显示出地图，这里我们使用html原生方式来讲解
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
/* 隐藏百度的下面log和版权声明 */
.anchrolBL, BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 地图对象初始化
let map = new BMapGL.Map('map');
// 地图中心坐标 - 后续地图绘制都需要这种坐标
let point = new BMapGL.Point(116.404,39.915);
// 可以展示地图了
map.centerAndZoom(point, 10);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
</script>
</body>
</html>
以上代码就拿展示出百度地图了
3. 异步加载地图
通常我们需要对一些首屏渲染速度敏感应用进行地图的异步加载：
<!DOCTYPE html>
<html>
<head>
<!-- 初始加载map的js会影响首屏速度 -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script> -->
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
/* 隐藏百度的下面log和版权声明 */
.anchrolBL,
BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function init() {
// 地图对象初始化
let map = new BMapGL.Map('map');
// 地图中心坐标 - 后续地图绘制都需要这种坐标
let point = new BMapGL.Point(116.404, 39.915);
// 可以展示地图了
map.centerAndZoom(point, 10);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
}
// 页面所有资源加载完成之后回调
window.onload = function () {
let script = document.createElement('script');
// 结尾url添加callback，这样加载完成之后会调用我们的init方法
script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥&callback=init';
document.body.append(script);
}
</script>
</body>
</html>
主要是不要在初始化时加载map的js，而是在onload回调中进行加载，同时借助url的callback来调用我们封装的init方法
4. 3D地图
3D地图能够很方便的展示园区和学校等建筑，还可以通过旋转角，俯角来更好的进行展示的效果
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
/* 隐藏百度的下面log和版权声明 */
.anchrolBL, BMap_cpyCtrl {
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 地图对象初始化
let map = new BMapGL.Map('map');
// 地图中心坐标 - 后续地图绘制都需要这种坐标
// 百度有坐标拾取器，可以获取地点的坐标
let point = new BMapGL.Point(116.404,39.915);
// 可以展示地图了,第二个参数zoom
map.centerAndZoom(point, 10);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
// 设置旋转角和俯角，可以看到3D效果
let heading = 0;
map.setHeading(heading);
map.setTilt(30);
// 动画-自动旋转 -- 不流畅的动画，官方也不推荐，后续会讲解其他方案
setInterval(() => {
heading++;
map.setHeading(heading);
},500)
</script>
</body>
</html>
5. 3D地球
// 出现3D地球 - 卫星图
// 同样也可以配置旋转和俯角
map.setMapType(BMAP_EARTH_MAP);
其他地图类型可以看这里：
mapopen-pub-jsapi.bj.bcebos.com/jsapi/refer…
