腾讯位置服务定位打卡功能实现

于 2021-06-11 12:08:49 发布
阅读量1.2k 收藏 7
点赞数 6
分类专栏： 腾讯位置服务
原文链接：https://binhao.blog.csdn.net/article/details/112736499
版权

如何使用腾讯位置服务API

1、注册成为开发者

2、申请密钥，在如图位置创建新密钥

image.png

3、进行配置

image.png

官方Api使用示例（JavaScript）

通过搜索接口找到个人公司位置：

https://apis.map.qq.com/ws/place/v1/search?keyword=嘉誉国际&boundary=region(上海,0) &key=你申请的key

image.png

查询到公司位置为(31.329716,121.508386)

初始化地图，中心设为公司位置

<!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=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        //地图初始化函数，本例取名为init，开发者可根据实际情况定义
        function initMap() {
            //定义地图中心点坐标
            var center = new TMap.LatLng(31.329716, 121.508386);
            //定义map变量，调用 TMap.Map() 构造函数创建地图
            var map = new TMap.Map(document.getElementById('container'), {
                center: center,//设置地图中心点坐标
                viewMode:'2D',//设置显示模式 2D 3D可以自己修改
                zoom: 17.2,   //设置地图缩放级别
                pitch: 43.5,  //设置俯仰角
                rotation: 45    //设置地图旋转角度
            });
        }
    </script>
</head>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>

效果展示：

image.png

标注的位置就是设置的中心啦。

为公司位置位置打上标记

效果示例：

image.png

公司的位置加上了style中写的图片，代码如下：

<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //创建map对象，初始化地图
        var center = new TMap.LatLng(31.329716, 121.508386);
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
        //创建并初始化MultiMarker
        var markerLayer = new TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                "myStyle": new TMap.MarkerStyle({
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 35, // 点标记样式高度（像素）
                    "src": '微信图片_20210107230437.jpg',  //图片路径
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }
                })
            },
            //点标记数据数组
            geometries: [{
                "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                "styleId": 'myStyle',  //指定样式id
                "position": new TMap.LatLng(31.329716, 121.508386),  //点标记坐标位置
                "properties": {//自定义属性
                    "title": "我的公司"
                }
            }
            ]
        });
    }

</script>

让标记的点动起来

主要通过使用moveAlong方法，定义移动的轨迹path，在moveAlong中传入移动的路线和坐标点，坐标点是geometries中的标记。

    <script>
    //地图初始化函数，本例取名为init，开发者可根据实际情况定义
    function initMap() {
        //创建map对象，初始化地图
        var center = new TMap.LatLng(31.329716, 121.508386);
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,//设置地图中心点坐标
            zoom: 17.2,   //设置地图缩放级别
            pitch: 43.5,  //设置俯仰角
            rotation: 45    //设置地图旋转角度
        });
        //创建并初始化MultiMarker
        var marker = new TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                "myStyle": new TMap.MarkerStyle({
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 35, // 点标记样式高度（像素）
                    "src": '微信图片_20210107230437.jpg',  //图片路径
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }
                })
            },
            //点标记数据数组
            geometries: [{
                "id": "person",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                "styleId": 'myStyle',  //指定样式id
                "position": new TMap.LatLng(31.329716, 121.508386),  //点标记坐标位置
                "properties": {//自定义属性
                    "title": "我的公司"
                }}
            ]
        });

        //定义的移动路线
        var path = [
            new TMap.LatLng(31.329716, 121.508386),
            new TMap.LatLng(31.330720, 121.508388),
            new TMap.LatLng(31.349725, 121.508389),
            new TMap.LatLng(31.359730, 121.508389),
            new TMap.LatLng(31.369718, 121.518400)
        ];

        marker.moveAlong({
                //让坐标动起来
                "person": {
                    path,
                    //速度为100
                    speed: 100
                }
            }, {
                autoRotation:true   //车头始终向前（沿路线自动旋转）
            }
        )
    }

</script>

使用腾讯位置服务API打卡功能实现

实现思路

111.png

位置搜索

接口：https://apis.map.qq.com/ws/place/v1/search

搜索上海 上海五角场地铁站的位置

示例：https://apis.map.qq.com/ws/place/v1/search?keyword=五角场地铁站&boundary=region(上海,0)&key=HLSBZ–

搜索结果截取：

{
    “id”: “10804093066539767491”,
    “title”: “五角场[地铁站]”,
    “address”: “地铁10号线”,
    “tel”: “”,
    “category”: “基础设施:交通设施:地铁站”,
    “type”: 2,
    “location”: {
    “lat”: 31.298109,
    “lng”: 121.514651
},
“ad_info”: {
    “adcode”: 310110,
    “province”: “上海市”,
    “city”: “上海市”,
    “district”: “杨浦区”
    }
}

现在知道五角场地铁站的经纬度了，就是Location那两个值。

注意key是创建好的这一串ID

image.png

通过搜索出来的是一个List，上述只拿出了List的第一位，通常第一位也是嘴和搜索关键字相符合的。通过搜索取出我们固定的经纬度的地址。

定位（Android定位）

单次定位，获取当前设备位置

mLocationManager.requestSingleFreshLocation(null, mLocationListener, Looper.getMainLooper());

其他IOS等设备可以通过上述官网链接官方文档查看。

获取到位置后将该位置传到后台接口。

后台接口

求距离：

// 写死的公司位置，实际项目中应该是数据库配置
private static final double COMPANY_LAT = 31.298109;
private static final double COMPANY_LNG = 121.514651;

@GetMapping("distance")
public Map<String,Double> queryDistance(Double lat,Double lng){
    HashMap<String, Double> result = new HashMap<>(4);
    double distance = distance(COMPANY_LAT, lat, COMPANY_LNG, lng);
    result.put("distance",distance);
    return result;
}

/**
 * 求两个经纬度之间的距离
 */
public static double distance(double lat1, double lat2, double lng1, double lng2) {
    final int r = 6371;
    double latDistance = Math.toRadians(lat2 - lat1);
    double lonDistance = Math.toRadians(lng2 - lng1);
    double a = Math.sin(latDistance / 2) * Math.sin(latDistance / 2)
            + Math.cos(Math.toRadians(lat1)) * Math.cos(Math.toRadians(lat2))
            * Math.sin(lonDistance / 2) * Math.sin(lonDistance / 2);
    double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    double distance = r * c * 1000;
    distance = Math.pow(distance, 2);
    return Math.sqrt(distance);
}

腾讯位置服务整体介绍

到腾讯位置服务:官网注册后找到官方文档介绍： 官网

image.png

腾讯位置服务已经提供了一套针对各个终端的开发接口，可以参考学习。

作者：兴趣使然的程序猿

链接：https://binhao.blog.csdn.net/article/details/112736499

来源：CSDN

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

腾讯位置服务
关注
专栏目录
博客
实测腾讯高精定位：赋能车道级导航 对驶入应急车道、车道级偏航等驾驶行为及时响应
12-29 3422
近日，腾讯位置服务团队自研并且支持北斗的高精度卫星定位服务，上线真我10 Pro+。该服务基于腾讯自研的网络RTK技术，可使真我10 Pro+的手机定位精度由传统卫星定位的5-10米精度提升至亚米级，用户通过腾讯地图APP（929及以上版本）在真我10 Pro+的手机上就能实现车道级定位和导航。
博客
构建全真互联数字地图底座 腾讯地图产业版WeMap重磅升级
12-05 3557
WeMap重磅升级！WeMap是腾讯面向智慧产业的数字地图底座。基于六大核心产品体系，面向智慧交通 、城市治理 、城市应急、智慧文旅、智慧零售和智慧地产提供行业解决方案。
博客
轨迹云全新发布 ：外业车辆、人员、设备轨迹高效管理
06-21 3886
轨迹管理、优化纠偏、里程计算、终端位置搜索
博客
“子账号”功能全新上线，助力企业开发者多人协作
03-17 4084
腾讯位置服务官网控制台的“子账号”体系正式上线，有效解决了在同一个企业账号下多人协作、多角色协作、多部门协作的难题，同时也实现了对账号访问和操作权限的有效控制。
博客
上新，“春节红”等5款个性化样式任你选，浓浓年味拉满
03-17 3655
2022年春节即将来临，腾讯位置服务个性化地图再度升级，推出了包括“春节红”主题在内的5款新模板，为广大开发者及行业客户提供了更多选择。同时，开发者还可以在这些模板的基础上进行二次编辑，打造专属独特的地图风格。
博客
2022广东春运指南：让回家的路更顺畅一些
03-17 3955
春节的脚步越来越近，又迎来一年的春运返乡高峰，小伙伴们是不是等不及要回家过大年？是不是还在忙着搜索各种攻略，研究如何避开春运高峰，让回家的路更顺畅一些呢？腾讯智慧交通、腾讯地图、腾讯研究院、腾讯位置服务、腾讯自动驾驶联合广东省公安厅交通管理局，基于腾讯交通数字底座核心能力，针对脱敏后的交通出行、位置服务大数据进行多维时空分析计算，发布《2022年广东省春运交通预测报告》（以下称《预测报告》），对省内春运道路拥堵、道路安全、车流迁徙及客流方面提供预测，帮助广大市民合理规划春节出行。一、道路拥挤情况预测根
博客
数据可视化编辑平台上线，小程序也能拥有可视化图层
12-31 4279
前言在这个“全民读图”的时代，传统的地图样式已经很难满足人们多样化的需求。腾讯位置服务一直在让地图变“美”的路上持续探索，力求提供更好的地图视觉体验。信息时代数据为王，将抽象的数据以直观生动的可视化效果呈现出来，可以让人们更容易发现数据背后的规律，提升业务决策的效率。如果这些数据同时带有地理位置属性，那么可视化与地图的结合就更加浑然天成了。近年以来，腾讯位置服务在数据可视化方面持续发力，不仅对Web端的数据可视化效果进行了全新升级，还在业内首发了APP端的数据可视化图层。最近上线的可视化图层编辑平台
博客
5个普通人与腾讯位置服务的故事，看看里面有你的影子吗？
12-30 3827
前言据统计，人类所产生的信息，80%以上的信息都和位置、时间相关。随着数字技术和实体生活的交融，时空数字技术的应用，正在悄悄改变我们的生活。一、天文爱好者的观星助手 让茫茫星河有迹可循北京冬奥会倒计时100天，入夜的天气状况很好，摄影师BH1TLX根据天文通预测的时间，提前来到奥林匹克公园，按照预测轨迹找好角度。灯光闪烁、节目彩排之际，恰逢中国空间站在鸟巢上空划过一道美丽的弧线，摄影师BH1TLX按下快门，捕捉到了中国空间站和鸟巢的同框画面。最近全国多地都刮起了“中国空间站打卡地标”的热风。在天安门
博客
2022腾讯大出行犀牛鸟专项研究计划本年度首次发布
12-30 4013
近日，腾讯大出行犀牛鸟专项研究计划本年度首次发布。该计划期望联合腾讯大出行团队的行业洞察与学界的前沿创新能力，共同探索推进地图、交通、出行、空间智能等方向的前沿研究和创新实践。腾讯大出行涵盖地图、智慧交通、智慧出行、智慧空间四大业务单元，是消费互联网和产业互联网的重要基础，提供地图导航、检索、出行等全方位服务，向政府及企业客户提供全面的时空技术、数字基础、智能服务和智慧行业产品。2022年度，依托北京和深圳的研究团队，大出行犀牛鸟专项将开放定位技术、计算机视觉、POI感知、位置服务、语音导航、未来网络.
博客
三维地图打造数、实融合底座
12-02 4088
从数字孪生地球到元宇宙，人们正在努力想象一个数实融合的全新世界。但回归现实层面，甚至连快速、高效地构建一座数字孪生城市都十分困难。伴随智慧城市、智慧交通、智慧文旅等领域对地图的应用不断深化，不仅传统二维地图已无法为行业应用提供足够支持，静态三维地图的局限性也开始逐步显现。行业正在呼唤一张实时更新的三维地图，以突破“数”与“实”的边界。一、全新需求倒逼产业能力升级过去一年到两年间，时空数据的应用不断突破圈层，已经深入各个产业。住建部与自然资源部先后印发《城市信息模型（CIM）基础平台技术导则》与《实景
博客
腾讯地图产业版 WeMap 官网正式发布
12-01 1万+
腾讯地图产业版 WeMap 官网正式发布！五大核心产品、六大行业解决方案，腾讯面向智慧产业的数字地图底座，致力于成为“创建世界的伙伴”！
博客
腾讯地图产业版WeMap 升级
12-01 1万+
腾讯地图产业版WeMap重磅升级。全新游戏引擎渲染，自动化三维构建，助力产业客户实现高逼真、低成本、快更新的三维地图应用。
博客
温暖人心的地图 腾讯地图SDK全面支持无障碍及适老化
11-25 3711
作为普通人，我们每一天都在享受数字化信息化高速发展给我们生活带来的巨大便利。我们上网来浏览新闻、用手机APP来网上购物、点外卖、出门导航…很难想象如果有一天在使用这些应用的时候遇上了障碍，我们的生活会糟糕成什么样…但在我们的身边，就存在这么一群人，因为身体或者年龄的原因，无法自由自在的享受到我们普通人已经觉得司空见惯的数字化生活。比如说视障人士、老年人士…秉承“科技向善”的理念，腾讯位置服务在对无障碍功能的支持方面一向走在业界前列。早在2018年，腾讯位置服务就开始助力开发者打造无障碍产品，腾讯公司更是
博客
腾讯位置服务亮相第11届中国测绘地理信息技术装备博览会
10-21 600
10月17日，第11届中国测绘地理信息技术装备博览会（以下简称“博览会”）在山东省青岛世博城举办。本届博览会不仅有国内外测绘地信行业展商，腾讯位置服务等互联网跨界融合应用企业也纷纷亮相。博览会期间，自然资源部副部长王广华到访腾讯位置服务展台，参观大数据、物联网、云计算、人工智能等数字技术与传统测绘行业融合的最新成果，听取汇报互联网企业如何助力测绘地理信息行业转型升级。一、共筑互联互通的数字底座数字经济大潮下，地理位置信息成为物理世界和数字空间交汇融合的连接器，位置服务也成为实体行业融入互联网的新标配
博客
腾讯牟蕾：实景三维串起产业互联网与消费互联网
10-19 772
实景三维正在塑造数据、技术、应用的全新生态。为了构筑统一的空间基底，监管部门与企业的联动愈加频繁，跨领域企业合作正在成为常态。作为空间信息领域的深度参与者，腾讯在从数据生态、技术生态再到应用生态的产业链条中，扮演着助手的角色。“腾讯近日发布的实景三维中国解决方案是一个开放的生态。” 腾讯位置服务总经理牟蕾向泰伯网介绍：“在数据采集层和数据处理层，我们向地信测绘等专业机构提供算法、算力等开放能力。在应用层，则向更多企业和民众提供更加丰富的服务。”蓝海下仍存“暗礁”实景三维中国建设及其伴生而来的应用场
博客
使用地点云实现企业官网中的门店地图
09-16 574
对于企业站，一般会有的展示很多门店位置，如果简单使用文字表述，难免不直接，那么使用地图云的方式，能更加直观的展示地理位置信息。1.到官网注册账号可点击地点云进行详细了解2.创建数据表3.写入地理信息我们可以在管理后台逐条添加地理位置信息4.写入地理信息(API)当然对于门店的数据，复杂的业务下，可能需要自己的管理后台管理数据，那么就要使用api查询和写入数据4.1创建key4.2授权key4.3选择权限4.4使用接口5.网页展示经过数据的添加，管理后台手动添加，以及api
博客
智能地址解析接口全新上线 为物流业务加速增效
09-14 914
前言地址信息的填写，是所有物流配送场景的起点。这个环节的重要性无需多言，地址信息的准确规整，是后续所有物流环节能够顺畅运行的前提条件。我们很难想象，一个错误的或者格式不规范的收件人地址，会给物流公司和快递小哥们带来多大的困扰，增加多少的负担；当然，也会给包括收件人和寄件人在内的最终用户带来损失。为了解决地址信息准确性和规范化的问题，腾讯位置服务凭借多年来深耕物流行业的丰富经验，以及庞大完整的地址库和行政区划信息，对外正式推出了智能地址解析接口。通过先进的地址关键信息提取技术，利用智能挖掘算法对地址信息进
博客
使用腾讯位置服务制作个性化地图（视频教学）
09-09 753
灵活控制地图元素展现效果，适配行业场景；轻松调整地图整体配色，契合应用和品牌色调；高自由度定制地图样式，打造地图可视化效果。优点：1.微信小程序、APP、H5、Unity全平台通用2.微信原生地图开放，支持无极缩放，体验流畅3.极简开发，三步走就能完成小程序地图的个性化展现4.动态更新，样式改变无需发布新版本...
博客
腾讯位置服务2021年中秋节&国庆节假期服务公告
09-02 1194
博客
微信小程序地图如何显示附近厕所WC步行路线
08-26 830
前言第一次使用腾讯位置服务也算是挺早的，当时是在web端使用。后来，个人慢慢接触到小程序，有一次的需求是能够展示附近的各类店铺，方便自己快速定位周围有什么好吃好逛的地方。再后来每次到一个地方旅游，我们必不可少的一个需求就是需要上WC，当时就在想如何通过一个地图来实现快速定位周边WC的位置以及步行路线，现在好了，有腾讯位置服务功能可以直接在小程序上面直接使用，借助巨人的力量可以好好发挥去实现需求功能了。因此，写这篇文章，也是希望能够总结对接腾讯位置服务功能步骤和知识点，方便开发同行快速上手和使用。申请K
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值