尋找隱藏的朋友們

一、使用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);
}