写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自动画片《狮子王》中的“彭彭”，总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域，如今终有小成，愿将昔日所获与大家交流一二，希望对学习路上的你有所助益。同时，博主也想通过此次尝试打造一个完善的技术图书馆，任何与文章技术点有关的异常、错误、注意事项均会在末尾列出，欢迎大家通过各种方式提供素材。

对于文章中出现的任何错误请大家批评指出，一定及时修改。
有任何想要讨论和学习的问题可联系我：zhuyc@vip.163.com。
发布文章的风格因专栏而异，均自成体系，不足之处请大家指正。

腾讯位置 - 地图构建入门（结尾附视频）

本文关键字：腾讯位置、地图、Web端、JavaScript API GL、使用教程

文章目录

腾讯位置 - 地图构建入门（结尾附视频）
- 一、功能介绍
- 二、密钥申请
- - 1. 用户登录
  - 2. 验证信息
  - 3. 申请密钥
  - 4. 密钥配置
- 三、操作步骤
- - 1. 开发文档入口
  - 2. 地图基础入门
  - 3. 中心点坐标查询
  - 3. 完整案例源码
- 四、视频直达

一、功能介绍

Javascript API GL是基于WebGL技术打造的3D版地图API，3D化的视野更为自由，交互更加流畅。提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。

二、密钥申请

1. 用户登录

打开腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮：

2. 验证信息

点击控制台，进入开发者信息界面，补全基本用户信息，完成验证。

3. 申请密钥

点击左侧key与配额下的key管理：

点击创建新密钥，填写Key名称、描述、验证码，等待审核通过：

创建成功后，可以在管理界面查看到密钥信息：

4. 密钥配置

密钥申请通过后，可以点击设置按钮修改名称及描述，并可以选择启用的产品，以及对调用规则进行限制：

同时，可以在查看配额界面查看各接口的用量情况：

三、操作步骤

1. 开发文档入口

滑动到上方菜单的开发文档 -> 选择Web端下的JavaScript API：

点击左侧的基础入门：

直达地址：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic

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，喜欢的小伙伴儿一定要三连加关注哦~

腾讯位置 - 地图构建入门

写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！

扫描下方二维码，加入官方粉丝微信群，可以与我直接交流，还有更多福利哦~