“技术让生活更便捷”之腾讯位置服务JavaScript API2.0前端定位和位置标注的开发实录

一、项目需求 1.项目需求

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

2.需求分解

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

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

二、开发实战 1.引入功能库和附件库

2.构建腾讯地图容器

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[n].toilet_name + '

        function getDistance(newData, latlngs) {
            var newArr = [];
            var start = new qq.maps.LatLng(position.lat, position.lng);
            for (var i = 0; i