基础入门 - 使用指南 - JavaScript API GL

使用步骤

1. 登录并注册成为腾讯位置服务开发者
2. 进入 [控制台 -> key管理] 界面进行创建（在引入API库时需要将key做为参数传入）
3. 开始使用JavaScript API GL

测试版在桌面端兼容的浏览器为：Chrome、Safari、QQ浏览器；
移动端兼容的浏览器为：微信内置webview、Chrome、Safari；
其他浏览器的支持敬请期待后续版本；

下面为您演示利用Javascript API GL实现地图显示，使您对它有一个整体的认识，而具体的细节将在hello word之后为您详细阐述。

代码展示了显示地图的一般步骤：
1. 在body中预先准备地图容器，并在CSS样式中定义地图(容器)显示大小
2. 引入API库
3. 创建并显示地图的代码（本例中，通过页面onload事件触发运行init函数实现地图显示）
而在实际的项目中，可以根据需求，实现动态创建地图容器、异步加载地图API、动态设置地图中心点等任意操作。
<!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>  <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></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>  <body onload="initMap()">  <div id="container"></div> </body> </html>

查看示例

加载Javascript API GL

通过接引入script标签加载API服务，格式如下： <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
其中：https://map.qq.com/api/gljs 为API库地址，其参数包括：
key：您的开发key，可在[控制台 -> key管理] 界面进行创建得到
v ：代表引用的版本号，通地该参数可调用指定版本的API库，请使用1.exp，代表Javascript API GL v1最新版，我们会保证1.x大版本的接口兼容，让您获得最新最快的支持。
libraries：用来指明加载的附加库，可以指定多个附加库名称，名称之间用英文半角字符逗号","分隔，目前支持：
visualization：可视化组件库（查看详情），将位置数据转化为可视图像的工具，比如热力图、散点图等。
其它附加库我们会在后续版本中陆续提供，敬请期待。
callback：指定异步加载API后的回调函数，见下文详述（直接引入API时请勿加此参数）

异步加载API：
通过动态创建script标签，并指定callback参数，在API加载后会自动调用callback指定回调函数，实现异步加载（按需加载） 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, //设置地图缩放级别 }); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init"; document.body.appendChild(script); } window.onload = loadScript; 查看示例

不再支持file://方式使用Javascript API GL：
本API需要在有Web服务的情况下才能正常使用，Windows环境可以使用IIS或其它Web服务器软件，Linux可用apache/nginx等，配置完成后通过localhost进行调试使用（发布上线，用域名/ip访问不存在这个问题）：

其它说明

坐标系：
腾讯位置服务API使用的坐标体系，为国测局规定的GCJ-02坐标系，是国内的标准坐标体系，经过国家测绘局加密处理，符合国家测绘局对地理信息保密要求。如果原始数据是使用的GPS坐标或其它地图坐标系，则需要进行坐标转换，否则显示位置将会和实际位置有偏差。
具体操作请参照：https://lbs.qq.com/webservice_v1/guide-convert.html。

坐标格式：
JavaScript API GL使用的坐标格式是{纬度, 经度}，即纬度在前，经度在后，如果在使用API过程中，发现地图无法显示，请先查看坐标格式是否正确。从其它几家API切换过来的用户尤其要注意这个区别。