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

Posted 2022-03-04 一头小山猪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了腾讯位置 - 地图构建入门（结尾附视频）相关的知识，希望对你有一定的参考价值。

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

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

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

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

文章目录

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

一、功能介绍

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>