将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式

1. 百度开发者账户申请

具体可以参考这里：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

最后当你的应用创建好了，就会得到一个服务密钥

然后这里是百度地图的API：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html

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);// 可以展示地图了,第二个参数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);

其他地图类型可以看这里：

https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a4b0

百度地图开发入门（1）：案例相关推荐

Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
百度地图开发入门（3）：动画
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 百度地图提供了一些API来提供动画的开发 1. ViewAnimation帧动画开发 <body><div i ...
百度地图开发入门（5）：飞线动画示例
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 讲解另一种常见应用-飞线动画,主要用于展示数据流向 https://lbsyun.baidu.com/solutions/map ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
新手入门百度地图开发的（0,0）坐标问题
对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因.新接触百度地图开发工作其实并不容易.今天说说关于坐标(0,0)的问题. 首先仍然介绍坐标系,我们先不管采用的和wgs84还是gcj02 ...
Android 百度地图开发之一（Hello BaiDu Map）
之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...
使用QT嵌入百度地图开发高B格岸基监控软件
文章目录 1.简述 2.百度地图 2.1百度地图准备 2.2 百度地图开发 2.2.1实时绘制轨迹 2.2.2设定航点 3 QT软件开发 3.1使用QWebEngineView显示Html 3.2 M ...
用android studio测量距离,Android studio 百度地图开发（6）Marker绑定事件、计算两点距离...
Android studio 百度地图开发(6)Marker绑定事件.计算两点距离 email:chentravelling@163.com 开发环境:win7 64位,Android Studio, ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...

百度地图开发入门（1）：案例