腾讯地图助力公共厕所信息无障碍查询

2024-01-30 08:17:33

前言

近年来，随着城市化进程的不断加快，公共厕所的数量和质量都有了很大的提高。然而，由于缺乏有效的查询方式，许多人仍然难以找到最近的公厕，尤其是身处陌生环境或旅游景点的人。针对这一问题，本文介绍如何使用腾讯地图定位组件实现周边公厕远近排序分布图，帮助人们快速找到最近的公厕，解决如厕难题。

实现步骤

1. 引入腾讯地图 API

首先，需要在 HTML 页面中引入腾讯地图 API。具体步骤如下：

在腾讯地图官网注册开发者账号并申请密钥。
在 HTML 页面中添加如下代码：

<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

其中，YOUR_KEY为你申请的密钥。

2. 获取用户位置

接下来，需要获取用户的当前位置。具体步骤如下：

在 HTML 页面中添加如下代码：

<script type="text/javascript">
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 13
    });

    var geolocation = new qq.maps.Geolocation("ip");
    geolocation.getLocation(function(position) {
        var lat = position.lat;
        var lng = position.lng;

        // 将用户位置在地图上标记出来
        var marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(lat, lng),
            map: map
        });
    });
</script>

其中，container是地图容器的 ID，center是地图的中心点，zoom是地图的缩放级别。

3. 查询周边公厕

获取用户位置后，就可以查询周边公厕了。具体步骤如下：

在 HTML 页面中添加如下代码：

<script type="text/javascript">
    var service = new qq.maps.LocalSearch({
        pageCapacity: 10,
        radius: 1000,
        keyword: "公厕"
    });

    service.search(function(result) {
        for (var i = 0; i < result.detail.pois.length; i++) {
            var poi = result.detail.pois[i];

            // 将公厕在地图上标记出来
            var marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(poi.latLng.lat, poi.latLng.lng),
                map: map
            });

            // 将公厕信息添加到信息窗口中
            var infoWindow = new qq.maps.InfoWindow({
                content: "<p>" + poi.name + "</p><p>" + poi.address + "</p>"
            });

            // 将信息窗口与标记关联起来
            marker.addEventListener("click", function() {
                infoWindow.open(map, marker);
            });
        }
    });
</script>

其中，pageCapacity是每次查询返回的结果数量，radius是查询半径，keyword是查询。

4. 排序公厕

查询到周边公厕后，就可以对公厕进行排序了。具体步骤如下：

在 HTML 页面中添加如下代码：

<script type="text/javascript">
    var sortedToilets = result.detail.pois.sort(function(a, b) {
        return a.latLng.lat - b.latLng.lat;
    });
</script>

其中，sortedToilets是排序后的公厕数组。

5. 显示公厕分布图

最后，就可以将公厕分布图显示在地图上了。具体步骤如下：

在 HTML 页面中添加如下代码：

<script type="text/javascript">
    for (var i = 0; i < sortedToilets.length; i++) {
        var toilet = sortedToilets[i];

        // 将公厕在地图上标记出来
        var marker = new qq.maps.Marker({
            position: new qq.maps.LatLng(toilet.latLng.lat, toilet.latLng.lng),
            map: map
        });

        // 将公厕信息添加到信息窗口中
        var infoWindow = new qq.maps.InfoWindow({
            content: "<p>" + toilet.name + "</p><p>" + toilet.address + "</p>"
        });

        // 将信息窗口与标记关联起来
        marker.addEventListener("click", function() {
            infoWindow.open(map, marker);
        });
    }
</script>