一、功能介绍
Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。
二、密钥申请
1. 用户登录
2. 验证信息
点击控制台，进入开发者信息界面，补全基本用户信息，完成验证。
3. 申请密钥
点击左侧key与配额下的key管理：
点击创建新密钥，填写Key名称、描述、验证码，等待审核通过：
创建成功后，可以在管理界面查看到密钥信息：
4. 密钥配置
密钥申请通过后，可以点击设置按钮修改名称及描述，并可以选择启用的产品，以及对调用规则进行限制：
同时，可以在查看配额界面查看各接口的用量情况：
三、操作步骤
1. 开发文档入口
滑动到上方菜单的开发文档 -> 选择Web端下的JavaScript API：
点击左侧的基础入门：
2. 地图基础入门
使用文档中的如下代码即可构建出基本的地图：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hello world!</title> <style type="text/css"> #container{ /*地图(容器)显示大小*/ width:1200px; height:400px; } </style> <!--引入Javascript API GL，需要替换自己的key--> <script src="https://map.qq.com/api/gljs?v=1.exp&key=替换为自己的key"></script> <script> //地图初始化函数，本例取名为init，开发者可根据实际情况定义 function initMap() { //定义地图中心点坐标 var center = new TMap.LatLng(39.984120, 116.307484) //定义map变量，调用 TMap.Map() 构造函数创建地图 var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 zoom: 17.2, //设置地图缩放级别 pitch: 43.5, //设置俯仰角 rotation: 45 //设置地图旋转角度 }); } </script> </head> <!-- 页面载入后，调用initMap函数 --> <body onload="initMap()"> <!-- 定义地图显示容器 --> <div id="container"></div> </body> </html>
渲染效果如下：
得到的是一个可操作的地图组件，可以进行拖拽，旋转，缩放等操作。在本地测试时一定不要使用浏览器直接打开html文件，而要使用HBuilder工具，使用服务的方式访问，或者也可以使用Tomcat、Nginx等工具发布。
3. 中心点坐标查询
在针对地图组件进行测试时可以先使用坐标拾取器直接查询到对应位置的坐标：
如深圳西部硅谷，结果如下（将坐标填入初始化代码中即可）：
或者也可以通过地址解析接口来直接获取坐标数据，将在后文中介绍。
3. 完整案例源码
四、视频直达
视频地址：https://www.bilibili.com/video/BV1CK4y1W7y1，喜欢的小伙伴儿一定要三连加关注哦~
腾讯位置 - 地图构建入门
写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！
