快速入门 - 位置数据可视化API

准备开始

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

可视化图层
位置数据可视化API（以下简称可视化API），所提供的可视化效果是以图层的方式叠加在JavaScript API GL之上，图层中所显示的数据由实例化的对象统一管理

加载可视化API
可视化API是以 Javascript API GL的附加库的形式加载的，请确保：
引入时须传入&libraries=visualization参数（查看：Javascript API GL加载参数说明）
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY&libraries=visualization"></script>

Hello world!

下面以一个实例为您说明，以便您对它有一个整体的认识 <!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 charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=visualization"></script> <script> //地图初始化函数，本例取名为init，开发者可根据实际情况定义 function initMap() { //定义地图中心点坐标 var center=new TMap.LatLng(40.040523,116.273654) //定义map变量，调用TMap.Map构造函数创建地图 var map = new TMap.Map(document.getElementById('container'), { center: center,//设置地图中心点坐标 zoom:17, //设置地图缩放级别 mapStyleId: 'style1' //个性化地图样式设置 }); //初始化散点图层并添加至map var dot = new TMap.visualization.Dot({ //自定义散点样式（可选） styles: { circle:{ type: "circle", fillColor: "#FF0000" } }, }).addTo(map);//将图层添加到map中 //为dot图层添加数据 dot.setData([ {lat: 40.040934, lng: 116.272677, styleId:"circle"}, {lat: 40.040350, lng: 116.272666, styleId:"circle"}, //其它点省略... ]) } </script> </head>  <body onload="initMap()">  <div id="container"></div> </body> </html>
散点效果图：

个性化地图样式

您可登录腾讯位置服务官网控制台，在个性化地图编辑平台选用我们精心设计的地图样式，也可尽情发挥您的创意，定制出出您专属风格。