腾讯位置服务 JavaScript API GL 开发指南一：疫情标记

admin管理员组

文章数量:1662758

写在前面

橡皮擦在最近在研究一些地图数据呈现方面的案例，一直在寻找一款实用的工具

经过一番查找，还真发现了一款，腾讯位置服务，因教程关系，你可以先点击下述链接，注册一个账号，目前大部分功能都是免费使用。

https://lbs.qq?lbs_invite=KZ2RFLK

接下来将带给大家几篇关于位置服务相关的博客。

JavaScript API 与 数据可视化 API

由于腾讯位置服务中相关功能较多，我主要用到的是下图两个部分内容。

官方描述的概述为：

Javascript API GL 是基于 WebGL 技术打造的 3D 版地图 API，3D 化的视野更为自由，交互更加流畅。
提供丰富的功能接口，包括点、线、面绘制，自定义图层、个性化样式及绘图、测距工具等，使开发者更加容易的实现产品构思。
充分发挥 GPU 的并行计算能力，同时结合 WebWorker 多线程技术，大幅度提升了大数据量的渲染性能。最高支持百万级点、线、面绘制，同时可以保持高帧率运行。

对于这些，橡皮擦不太关心，只要好用，易用，上手快即可。

第一步：申请一个 Key

类似应用都需要先初始化一个 Key，以方便后续各种功能的研发，所以进入控制台，先把 Key 配置好。

第二步：作为一个好 JS 库，一定要具备在线测试环境

测试了一下，这点腾讯位置服务做得还不错。

https://lbs.qq/webApi/javascriptGL/glGuide/glBasic

开发文档比较清晰，可以直接在线调试。

通过坐标拾取器，获取一下 【河北园博园】 的坐标，然后在上图右侧代码经纬度位置填写对应地址。

https://lbs.qq/tool/getpoint/index.html

核心代码如下：

<script type="text/javascript">
  function initMap() {
    var center = new TMap.LatLng(38.144609, 114.61384);
    //初始化地图
    var map = new TMap.Map("container", {
      rotation: 20, //设置地图旋转角度
      pitch: 30, //设置俯仰角度（0~45）
      zoom: 12, //设置地图缩放级别
      center: center, //设置地图中心点坐标
    });
  }
</script>

第三步：完成第一个小案例：疫情标记

本篇博客，要完成一个针对石家庄疫情的小案例，疫情标记功能，由于只做 Demo 演示使用，那我们需要准备的资料有：

1. 确诊者出现地点
2. 通过地点检索坐标
3. 地图标记

找到一位确诊病例，获取地点小果庄。

找到地址转坐标的接口：https://lbs.qq/service/webService/webServiceGuide/webServiceGeocoder

通过在线测试，得到对应数据如下，核对坐标数据。

请求地址为：

//GET请求示例，注意参数值要进行URL编码
https://apis.map.qq/ws/geocoder/v1/?address=你需要的地址&key=你的Key

还有这个地方用到 Key，需要配置好 WebserviceAPI，否则会出现如下错误：

{ "status": 199, "message":
"此key未开启WebserviceAPI功能，您可登录lbs.qq，进入控制台key管理界面，找到此key并设置启用WebserviceAPI"
}

按照说明，将 qq 设置好就可以使用腾讯提供的线上环境了。

标记代码如下：

 <script>
        var center = new TMap.LatLng(38.292732, 114.747902);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            center: center
        });

        //初始化marker
        var marker = new TMap.MultiMarker({
            id: "marker-layer", //图层id
            map: map,
            styles: { //点标注的相关样式
                "marker": new TMap.MarkerStyle({
                    "width": 25,
                    "height": 35,
                    "anchor": { x: 16, y: 32 },
                    "src": "https://mapapi.qq/web/lbs/javascriptGL/demo/img/markerDefault.png"
                })
            },
            geometries: [{ //点标注数据数组
                "id": "demo",
                "styleId": "marker",
                "position": new TMap.LatLng(38.292732, 114.747902),
                "properties": {
                    "title": "marker"
                }
            }]
        });
    </script>

最终运行效果：

第四步：批量获取确诊者轨迹，拆分位置信息

可以使用 Python 语言爬取数据，在对文本信息进行解析，将所有的地点都标记到地图上，这样就可以得到一张轨迹地图。

注意上文代码中经纬度的小数不要丢掉，否则坐标会产生很大的偏移。

初次使用腾讯位置服务感受

文档非常清晰，上手比较快，在线的测试环境流程度非常好，大家可以申请使用一下。

点击链接直接注册：https://lbs.qq?lbs_invite=KZ2RFLK

本文标签： 腾讯疫情标记位置指南