百度地图开发入门（1）：案例
将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式
1. 百度开发者账户申请
具体可以参考这里：
最后当你的应用创建好了，就会得到一个服务密钥
然后这里是百度地图的API：
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><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，而是在回调中进行加载，同时借助url的来调用我们封装的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);// 可以展示地图了,第二个参数zoommap.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);
其他地图类型可以看这里：
#a4b0
