腾讯位置服务定位组件实现周边公用厕所远近排序分布图

前言

地图应用非常广泛,目前地图服务,都提供地图操作、标注、地点搜索、出行规划、地址解析、街景等接口,功能非常丰富。在实际开发过程中,各有优劣。本次基于需求,使用腾讯位置服务作为一个公用厕所位置标注的H5页面开发。

本次使用版本: JavaScript API 2.0版本。

项目需求

1、项目需求

基于腾讯位置服务,实现微信扫描二维码后,在微信浏览器内,展示某县城的公用厕所分布图,按照用户当前定位与各个厕所之间的距离远近排序,点击标注点跳转到腾讯地图进行导航。

image.png

2、需求分解

基于上述需求,对使用到的腾讯位置服务接口予以分解如下:

腾讯地图加载;
自动定位;
信息点(POINTS)标注maker;
计算标注点之间的距离;
导航跳转链接API接口;
街道与卫星地图切换控件;
缩放控件;

开发实战

1、引入功能库和附件库

    <script charset="utf-8"
            src="https://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor&key={$appkey}"></script>
    <script type="text/javascript"
            src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

2、构建腾讯地图容器

<!--地图加载-->
<div id="location" onclick="getLocation();"><img src="{$url}{$STATIC}images/location.png" alt=""></div>
<div id="txmap"></div>

3、调用前端定位组件

由于项目需要多次调用地图和定位,为此,在script脚本中map和geolocation都设置为全局函数。

  var map;//全局函数
  var geolocation = new qq.maps.Geolocation(appkey, "{$referer}");
  var options = {timeout: 8000};

 function getLocation() {
        geolocation.getLocation(showPosition, showErr, options);
    }

getLocation(sucCallback, errCallback, [options: {timeout: number, failTipFlag: boolean}])方法

获取当前所在地理位置,调用一次即重新定位一次,定位数据比较精确。
sucCallback为定位成功回调函数,必填;
errCallback为定位失败回调函数,选填,如果不填,请设为null;
options为定位选项,选填,可以通过timeout参数设置定位的超时时间,默认值为10s;
failTipFlag: 是否在定位失败时给出提示引导用户打开授权或打开定位开关。(即将支持)

1)定位成功回调函数

function showPosition(position) {
}

获取位置坐标显示地图

        map = new qq.maps.Map(document.getElementById("txmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(position.lat, position.lng),
            zoom: 15
        });

定义当前位置maker样式图片

        var imgUrl = "static/rooted/images/icon.png";
        var anchor = new qq.maps.Point(6, 6),
                size = new qq.maps.Size(45, 46),
                origin = new qq.maps.Point(0, 0),
                icon = new qq.maps.MarkerImage(imgUrl, size, origin, anchor);

        var marker2 = new qq.maps.Marker({
            icon: icon,
            map: map,
            position: new qq.maps.LatLng(position.lat, position.lng)
        });

读取信息点(POINTS)并在地图上标注

1、标准JSON数据格式

为方便展示,此处仅展示数据格式,实际应用做,使用ajax获取即可。

[
    {
        "toilet_id": "9",
        "toilet_name": "智慧广场",
        "toilet_address": "西溪路 智慧中心南",
        "toilet_url": "upload/preview/2020-11/15784affe0de0d45c5f33625851527e9.jpg",
        "toilet_lon": "115.965248",
        "toilet_lat": "35.597050"
    },
    {
        "toilet_id": "14",
        "toilet_name": "唐塔公厕",
        "toilet_address": "东门街北段唐塔广场",
        "toilet_url": "upload/preview/2020-11/8e5bda8c5b12f87ebad80c247d8f2b26.jpg",
        "toilet_lon": "115.946365",
        "toilet_lat": "35.602218"
    }
]

2、地图标注并计算距离

   //地图标注;
                getTxMap(newData, latlngs);
                //两点间的距离;
                getDistance(newData, latlngs);

经纬度标注封装函数

        function getTxMap(newData, latlngs) {
            for (var i = 0; i < newData.length; i++) {
                (function (n) {
                    var marker = new qq.maps.Marker({
                        position: latlngs[n],
                        map: map
                    });

                    qq.maps.event.addListener(marker, 'click', function () {
                        var popHtml = '<div class="pop">到这里: <a href="https://apis.map.qq.com/uri/v1/routeplan?type=walk&from=起步位置&fromcoord=' + position.lat + ',' + position.lng + '&to=' + newData[n].toilet_name + '&tocoord=' + newData[n].toilet_lat + ',' + newData[n].toilet_lon + '&policy=0&referer={$referer}">' + newData[n].toilet_name + '</a></div>';
                        infoWin.open();
                        infoWin.setContent(popHtml);
                        infoWin.setPosition(latlngs[n]);
                    });
                })(i);
            }
        }

计算两点间的距离函数封装

        function getDistance(newData, latlngs) {
            var newArr = [];
            var start = new qq.maps.LatLng(position.lat, position.lng);
            for (var i = 0; i < latlngs.length; i++) {
                var end = latlngs[i];
                var distance = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end) * 10) / 10;
                //拼接新的距离数组数据;
                newArr.push({
                    toilet_id: newData[i].toilet_id,
                    toilet_name: newData[i].toilet_name,
                    toilet_address: newData[i].toilet_address,
                    toilet_url: newData[i].toilet_url,
                    toilet_lon: newData[i].toilet_lon,
                    toilet_lat: newData[i].toilet_lat,
                    distance: distance
                })
            }
            //升序排列;
            function compare(key) {
                return function (value1, value2) {
                    var val1 = value1[key];
                    var val2 = value2[key];
                    return val1 - val2;
                }
            }
            newArr.sort(compare('distance'));
            console.log(newArr);

2、定位失败回调函数

    //定位失败,自动跳转页面;
    function showErr() {
        //alert("定位失败!");
        window.location.href = "?m=Index&a=error"
    }

坐标经纬度拾取

1、腾讯坐标拾取器

项目开发过程中,需要自己拾取坐标经纬度,以满足初始数据的测试和演示使用。一般会使用腾讯提供的坐标拾取器。链接地址:https://lbs.qq.com/tool/getpoint/index.html。

支持地址 精确/模糊 查询;
支持POI点坐标显示;
坐标鼠标跟随显示;

如果非要挑出点毛病的话,地图拾取框太小了,想随心所欲的拾取坐标,要缩放或拖拽很多次,心累。

2、WebService API地址解析(地址转坐标)

在项目完成测试后,如果遇到成千上百的地址时,一个一个的拾取,好像不是一个合格的开发者的所为。此时,就需要使用到地址解析和逆解析的API接口,即:在数据导入到数据库的过程中,自动批量地将地址转化为经纬度坐标,满足前端的调用。

本例中使用了腾讯位置服务的WebService API,后端语言使用PHP,简要的将该过程予以呈现。

1、封装WebService API接口函数

官方实例,如果在前端直接使用getJSON函数,会出现“同源策略”被阻止,为此需要后端爬取后,“曲线救国”。

//GET请求示例,注意参数值要进行URL编码
https://apis.map.qq.com/ws/geocoder/v1/?address=北京市海淀区彩和坊路海淀西大街74号&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
/*地址转坐标封装函数,文件名称为points.php
*$address,需要转化的地址,越详细经纬度精度越高;
 */
function getGeoCoding($address)
{
    $url = "https://apis.map.qq.com/ws/geocoder/v1/?address=" . $address . "&key={$key}";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);
    return $output;
}
//获取前端传入的地址参数;
$address = $_GET["address"];
//输出json数据格式,供前端调用;
die(getGeoCoding($address));

2、前端调用

    //自動獲取經緯度;
    var getAddress = function transAddress() {
        var address = $("#address").val();
        getPoints(address);
    }

    //前端页面输出;
    function getPoints(address) {
        $.getJSON("points.php", {address: address}, function (res) {
            if (res.status == 0) {
                $("#lng").val(res.result.location.lng);
                $("#lat").val(res.result.location.lat);
            } else {
                $("#message").html(res.message);
            }
        });
    }

3、效果演示

在导入地址数据的时候,一定要是省市区街道门牌号,地址越详细精度越高,否则会解析不出来,谨记!

注意事项

1、script标签加载API服务

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

在开发过程中,默认会这样引入到前端文件。测试环境和生成环境一致,或者更换环境也是一直,不会出现问题的。但是如果是http和https不一致的协议环境下,引入文件就会出现错误提示。

建议的加载方式:src不使用协议名称,让其自动匹配。如:

<script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

2、附加库的引入

学习一个新项目的最快捷方式是学会使用官方文档,因为这些文档是基础中的基础。但官方文档的有时太官方,有些细节无法清楚的展示出来。

官方文档不能解决的问题时,会“面对CSDN编程”,每个开发者遇到的问题不同,开发经验不同,在CSDN上的记录更多的是为了避免自己下次“入坑”提醒,无法完整的将项目的细节描述清楚,也是初学者看到人家明明解决了,为什么自己不可以的。

这里就牵涉到腾讯地图附加库的引入。

    <script charset="utf-8"
            src="://map.qq.com/api/js?v=2.exp&libraries=drawing,geometry,autocomplete,convertor&key={$appkey}"></script>

本项目中就遇见需要计算自动定位的经纬度和各个厕所之间的距离,需要使用geometry几何运算库。在未理解官方文档的前提下,强行CSDN,走路很多弯路才发现:开发语法明明对了,但是却没有计算出距离,就是没引入对应的附加库。

3、自动定位组件库

   <script type="text/javascript"
            src="//3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

使用自动定位功能,必须引入自动定位的geolocation.min.js附加库,无须多言。

4、经纬度位置

如果是首次开发地图就使用腾讯地图的话,出现这个错误的可能性比较低。如果有百度和高德地图开发的经验话,千万不要想当然。在这个问题上浪费了半个小时才发现,腾讯的经纬度和百度、高德的问题是互换的。

腾讯经纬度

new qq.maps.LatLng(39.914850, 116.403765); //构建对象的是(纬度,经度)

百度经纬度

map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //构建对象的是(经度,纬度)

高德经纬度

position: new AMap.LngLat(116.39, 39.9),//构建点对象的是(经度,纬度)

在使用坐标拾取器时,一定要选择各个对应的工具,导航等牵涉到坐标的地方一定要注意。

5、腾讯、百度和高德地图开发比较

对于不同的厂家地图的使用,一般都有“先入为主” 的刻板印象,也有甲方原因的客观要求。

对比项腾讯地图百度地图高德地图
功能标注、信息框、覆盖物、计算距离、轨迹、导航等常用功能同前同前
坐标火星坐标BD-09坐标火星坐标
坐标结构(39.914850, 116.403765)(116.4035,39.915)(116.39, 39.9)
语法结构同高德百度自有语法同腾讯
开发文档相对集中百度地图开发平台已升级到3.0版本,文档多,类库多相对集中
延伸数据可视化API服务同前同前

总结

本次使用版本: JavaScript API 2.0版本,目前我们提供的JavaScript API GL版本,功能更炫酷齐全,大家可以尝试接入使用。

作者:漏刻有时

链接:https://lockdatav.blog.csdn.net/article/details/113412823

来源:CSDN

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

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战&#xff0c;可谓是杀敌无数&#xff0c;见怪不怪了&#xff01;在某知识社交平台中&#xff0c;一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读&#xff0c;可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表&#xff1a;零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时&#xff0c;为空表。 在比较复杂的线性表中&#xff0c;一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言&#xff0c;按照其应用领域&#xff0c;可以粗略地分成三类。 有的语言是多面手&#xff0c;在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类&#xff0c;比如说 C&#xff0c;Java&#xff0c; Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后&#xff0c;该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情&#xff0c;很多情况下&#xff0c;他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言&#xff0c;首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图&#xff1a; 上码&#xff1a; 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况&#xff0c;重点关注在中国市场扮演重要角色的全球及本土铪生产商&#xff0c;呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外&#xff0c;针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…