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

简介: 腾讯位置 - 地图构建入门(结尾附视频)

一、功能介绍

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工具,使用服务的方式访问,或者也可以使用TomcatNginx等工具发布。

3. 中心点坐标查询

在针对地图组件进行测试时可以先使用坐标拾取器直接查询到对应位置的坐标:

如深圳西部硅谷,结果如下(将坐标填入初始化代码中即可):


或者也可以通过地址解析接口来直接获取坐标数据,将在后文中介绍。

3. 完整案例源码

四、视频直达

视频地址:https://www.bilibili.com/video/BV1CK4y1W7y1,喜欢的小伙伴儿一定要三连加关注哦~

腾讯位置 - 地图构建入门

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


目录
打赏
0
0
0
0
159
分享
相关文章
构建你的第一个Python爬虫
【8月更文挑战第31天】 本文是一篇入门级教程,旨在帮助初学者了解和实现一个简单的网络爬虫。我们将使用Python编程语言,因为它简单易学且功能强大。通过这篇文章,你将学会如何使用Python的requests库获取网页内容,以及BeautifulSoup库解析HTML。最后,我们将展示如何存储爬取的数据。无论你是编程新手还是想扩展你的技术栈,这篇文章都会为你打开网络数据抓取的大门。
程序技术好文:百度地图输入一个位置到另一个位置的路线
程序技术好文:百度地图输入一个位置到另一个位置的路线
48 0
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
273 0
visionOS空间计算实战开发教程Day 2 使用RealityKit显示3D素材
我们在Day1中学习了如何创建一个visionOS应用,但在第一个Demo应用中我们的界面内容还是2D的,看起来和其它应用并没有什么区别。接下来我们先学习如何展示3D素材,苹果为方便开发人员,推出了RealityKit,接下来看如何使用。
135 0
[笔记]黑科技:文件隐藏在图片里
[笔记]黑科技:文件隐藏在图片里
力扣35搜索插入位置:思路分析+图文详解+代码实现+拓展java源码
力扣35搜索插入位置:思路分析+图文详解+代码实现+拓展java源码
170 0
基于GEE的制作全球任意地方时间序列数据动画的方法
基于GEE的制作全球任意地方时间序列数据动画的方法
242 0
一文了解文件上传全过程(1.8w字深度解析,进阶必备)
由于文件上传功能将使许多应用程序受益,因此建议对HTML进行扩展,以允许信息提供者统一表达文件上传请求,并提供文件上传响应的MIME兼容表示。
1111 0
一文了解文件上传全过程(1.8w字深度解析,进阶必备)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等