数据可视化 JS API

准备开始

使用步骤：
1.登录腾讯位置服务控制台，如果没有注册过账号，请点击注册按钮注册成为腾讯位置服务开发者

2.创建应用和Key：

进入控制台后，展开应用管理菜单并选择我的应用

点击右侧创建应用，如果已经创建过应用，可以直接选择添加Key（在引入API库时需要将key做为参数传入）

可视化图层
数据可视化 JS 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>
     <!--引入Javascript API GL，参数说明参见下文-->
     <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>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
     <!-- 定义地图显示容器 -->
     <div id="container"></div>
</body>
</html>

散点效果图：

个性化地图样式

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

这篇文章对您解决问题是否有帮助？

已解决

未解决