腾讯地图Javascript API GL
1. 介绍
腾讯位置服务在多平台为开发者提供了丰富的地图展现形式,帮助从属于不同领域的开发人员轻松完成构建地图并在其基础上打造专属内容的工作。同时配合海量数据、个性化定制、可视化等能力满足各个行业场景下对地图的需求。
Javascript API GL
是基于WebGL
技术打造的3D版地图API,3D化的视野更为自由,交互更加流畅。
提供丰富的功能接口,包括点、线、面绘制,自定义图层、个性化样式及绘图、测距工具等,使开发者更加容易的实现产品构思。
充分发挥GPU的并行计算能力,同时结合WebWorker
多线程技术,大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制,同时可以保持高帧率运行。
2. 从Hello World开始
首先注册腾讯位置服务平台账号,完成个人认证后,新建应用申请应用Key
,
里边默认启用产品足够我们使用了,如果需要额外的服务勾选即可
进入JavaScript API,查看开发指南
选择基础入门
将官方提供的Hello World示例复制到我们的代码中,注意将应用Key
替换成自己申请的Key
<!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,参数说明参见下文--><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>
<!-- 页面载入后,调用init函数 -->
<body onload="initMap()"><!-- 定义地图显示容器 --><div id="container"></div>
</body>
</html>
以本地服务的方式去启动,不要以磁盘路径去访问
3. 个性化地图
地图平台大多默认采用经典白色风格,有时我们需要地图样式和企业系统风格保持一致,或者做一些个性化的展示。在这方面腾讯地图为开发者提供了可扩展的地图风格,包括一些官方样式模板,如果不满足我们的需求,还可以进行自定义样式。
选择(❤ ω ❤)的样式,点击直接使用,将样式和使用的应用Key
进行绑定
在代码中设置使用样式
//定义map变量,调用 TMap.Map() 构造函数创建地图var map = new TMap.Map(document.getElementById('container'), {center: center,//设置地图中心点坐标zoom: 17.2, //设置地图缩放级别pitch: 43.5, //设置俯仰角rotation: 45, //设置地图旋转角度mapStyleId: 'style1' //设置样式ID style1、style2...});
官方提供的样式(其中一个)运行结果如下:
4. 自定义样式
首先在开发者平台创建自己的自定义样式,将自定义样式和应用Key
关联后使用自定义样式
在应用中绑定自己设置的自定义样式
在代码中更改mapStyleId
为对于的自定义样式id
运行结果:
腾讯地图Javascript API GL相关推荐
- 腾讯地图JavaScript API GL实现文本标记的碰撞避让
以下内容转载自Crape的文章<web页面上的旋转矩形碰撞> 作者:Crape 链接:https://juejin.im/post/5eede991e51d45740950c946 来源: ...
- 腾讯地图JavaScript API GL 版标记及输入经纬度反向定位(vue.js实现)
<template> <div><el-form-item label="经度" prop="longitude" >< ...
- html5获取当前位置的api腾讯地图,腾讯地图JavaScript API调用
腾讯地图JavaScript API调用 1.加载地图 API 页面直接引入 https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4 ...
- 百度地图JavaScript API GL—简易行政区划图层
map开发 百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日 简易行政区划图层 更新时间:2022年3月12日 简介 DistrictLay ...
- 百度地图JavaScript API GL
介绍 百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
- 百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
- 解决百度地图JavaScript API GL v1.0版本重新加载页面
首先我们简单描述一下问题:home 和 about 点击之后可以切换路由,并且home和about都是含有百度地图的页面.再经过多次切换路由之后,页面会重新加载! 在经过多次点击之后,我们打开f12发 ...
- 腾讯地图javascript API实现地图模糊搜索标记,经纬度输入及点击双向定位
// 模板部分 <el-row><el-col :span="1"><el-form-itemlabel="腾讯坐标"/>& ...
- 百度地图 JavaScript API GL
文章目录 一.引入 二.添加控件 三.绘制点线面 四.标注信息 五.位置检索 一.引入 首先获取秘钥 1.进入百度地图官网:https://lbsyun.baidu.com/ 2.注册百度账号 3.首 ...
最新文章
- 大数据处理框架之Strom:Storm集群环境搭建
- Hibernate: Encountered a duplicated sql alias [] during auto-discovery of a native-sql
- java sofa rpc_【剖析 | SOFARPC 框架】
- 谈 数学之美 和 看见
- 使用Nginx反向代理来实现简单的负载均衡
- filecoin白皮书_【Filecoin挖矿小知识】在lotus开发网上可以参与Filecoin挖矿吗?
- 2016/11/07 线程的创建和启动
- 2021亳州高考成绩查询,2021年亳州高考状元名单公布,亳州文理科状元是谁多少分...
- [UE4]关于分支Sequence和条件分支的组合用法
- C++ 冰河木马的实现
- c语言万年历完整源代码,C语言万年历的源程序
- 入门图形学:ComputeShader
- Python语音助手
- 渗透基础学习-信息搜集
- c语言三维空间间绕坐标轴变换,浙江大学软件学院三维动画与交互技术考试概念拾掇...
- 高等数学:第十一章 无穷级数(1)常数项技术的概念、性质、审敛法、幂级数
- 创益德:30条APP开发商必懂原则话您知
- 07.尚硅谷网课7-实战练习
- 阿里企业邮箱smtp设置
- 慢慢欣赏linux CPU占用率和负载