寻找隐藏的朋友们

一、使用HTML5新增的Geolocation API定位

Geolocation API是HTML5提供的一个定位API，可以使用JavaScript在网站上获取用户的地理位置。在寻找隐藏的朋友中，我们可以通过Geolocation API定位用户的位置，并进一步找到附近的好友。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        function (position) {
            // 获取用户位置成功
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            // ...
        },
        function (error) {
            // 获取用户位置失败，处理异常
        }
    );
} else {
    // 浏览器不支持Geolocation API，处理异常
}

二、使用AJAX向服务器查询附近好友

在用户位置定位成功后，我们需要向服务器查询附近的好友。可以使用AJAX技术向服务器发送请求，并获取服务器返回的JSON格式的数据。在获取到数据后，可以使用JavaScript动态创建DOM元素，展示查询到的好友信息。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/friend/nearby?lat=xxx&lng=xxx');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            for (let friend of data.friends) {
                // 动态创建DOM元素展示好友信息
            }
        } else {
            // 处理错误
        }
    }
};
xhr.send(null);

三、优化查询效率

在查询附近好友时，可以对查询结果进行过滤，并限定查询的范围，从而提高查询效率。例如，可以只查询经纬度差值小于一定数值的好友，并且限定查询范围在一定的距离以内。

// 经纬度差值小于0.2
const latDelta = 0.2;
const lngDelta = 0.2;
// 限定查询范围在10km以内
const maxDistance = 10000;
const result = [];
for (let friend of friends) {
    const latDiff = Math.abs(friend.lat - myLat);
    const lngDiff = Math.abs(friend.lng - myLng);
    const distance = getDistance(friend.lat, friend.lng, myLat, myLng)
    if (latDiff <= latDelta && lngDiff <= lngDelta && distance <= maxDistance) {
        result.push(friend);
    }
}

四、使用百度地图API展示位置

在查询到好友位置后，可以使用百度地图API展示查询到的好友位置信息。可以使用JavaScript动态创建百度地图，并在地图上添加标记，标记好友位置。

const map = new BMap.Map("map-container"); // 创建地图实例
map.centerAndZoom(new BMap.Point(myLng, myLat), 11); // 初始化地图，设置中心点坐标和地图级别
for (let friend of friends) {
    const point = new BMap.Point(friend.lng, friend.lat); // 创建标注点坐标
    const marker = new BMap.Marker(point); // 创建标注并添加到地图中
    map.addOverlay(marker);
}