地理定位 - 应用场景 - 附近商家推荐

前端 - HTML5 《地理定位 - 应用场景 - 附近商家推荐》

一、引言

在当今数字化的时代，移动互联网的发展使得基于地理位置的服务（LBS）变得越来越重要。附近商家推荐就是其中一个典型的应用场景，它能够根据用户当前的地理位置，为用户提供周边的商家信息，极大地方便了用户的生活。HTML5 提供了地理定位 API，使得前端开发者可以轻松地实现这一功能。本文将详细介绍如何使用 HTML5 地理定位 API 实现附近商家推荐功能，并给出相应的演示代码。

二、HTML5 地理定位 API 简介

三、实现思路

要实现附近商家推荐功能，我们的主要步骤如下：

获取用户的当前地理位置。
有一个包含商家信息和地理位置的数据集。
计算用户位置与每个商家位置之间的距离。
根据距离对商家进行排序，筛选出附近的商家。
将筛选出的商家信息展示给用户。

四、演示代码

HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>附近商家推荐</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #result {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>附近商家推荐</h1>
    <button onclick="getLocation()">查找附近商家</button>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript 部分（script.js）

// 模拟商家数据集，每个商家包含名称、经度和纬度
const merchants = [
    { name: '商家 A', lat: 30.0001, lon: 120.0001 },
    { name: '商家 B', lat: 30.0002, lon: 120.0002 },
    { name: '商家 C', lat: 30.0003, lon: 120.0003 },
    { name: '商家 D', lat: 30.0004, lon: 120.0004 },
    { name: '商家 E', lat: 30.0005, lon: 120.0005 }
];
// 计算两点之间的距离（单位：千米）
function calculateDistance(lat1, lon1, lat2, lon2) {
    const R = 6371; // 地球半径，单位：千米
    const dLat = (lat2 - lat1) * (Math.PI / 180);
    const dLon = (lon2 - lon1) * (Math.PI / 180);
    const a =
        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return R * c;
}
// 获取用户位置
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        document.getElementById('result').innerHTML = "浏览器不支持地理定位。";
    }
}
// 显示用户位置并查找附近商家
function showPosition(position) {
    const userLat = position.coords.latitude;
    const userLon = position.coords.longitude;
    // 计算每个商家与用户的距离
    const nearbyMerchants = [];
    for (let i = 0; i < merchants.length; i++) {
        const merchant = merchants[i];
        const distance = calculateDistance(userLat, userLon, merchant.lat, merchant.lon);
        if (distance <= 1) { // 筛选距离在 1 千米以内的商家
            nearbyMerchants.push({...merchant, distance });
        }
    }
    // 按距离排序
    nearbyMerchants.sort((a, b) => a.distance - b.distance);
    // 显示附近商家信息
    let resultHTML = '<h2>附近商家列表</h2>';
    if (nearbyMerchants.length === 0) {
        resultHTML += '<p>附近没有符合条件的商家。</p>';
    } else {
        resultHTML += '<ul>';
        for (let i = 0; i < nearbyMerchants.length; i++) {
            const merchant = nearbyMerchants[i];
            resultHTML += `<li>${merchant.name}，距离：${merchant.distance.toFixed(2)} 千米</li>`;
        }
        resultHTML += '</ul>';
    }
    document.getElementById('result').innerHTML = resultHTML;
}
// 处理地理定位错误
function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            document.getElementById('result').innerHTML = "用户拒绝了地理定位请求。";
            break;
        case error.POSITION_UNAVAILABLE:
            document.getElementById('result').innerHTML = "位置信息不可用。";
            break;
        case error.TIMEOUT:
            document.getElementById('result').innerHTML = "获取位置信息超时。";
            break;
        case error.UNKNOWN_ERROR:
            document.getElementById('result').innerHTML = "发生未知错误。";
            break;
    }
}

五、代码解释

HTML 部分：创建了一个简单的页面，包含一个按钮和一个用于显示结果的 div 元素。点击按钮会调用 getLocation() 函数。
JavaScript 部分：
- merchants 数组模拟了一个商家数据集，每个商家对象包含名称、纬度和经度。
- calculateDistance() 函数使用 Haversine 公式计算两点之间的距离。
- getLocation() 函数检查浏览器是否支持地理定位，如果支持则调用 getCurrentPosition() 方法获取用户位置。
- showPosition() 函数在成功获取用户位置后，计算每个商家与用户的距离，筛选出距离在 1 千米以内的商家，并按距离排序后显示在页面上。
- showError() 函数处理地理定位过程中可能出现的错误。

六、注意事项

用户需要允许浏览器获取其地理位置信息，否则会触发 PERMISSION_DENIED 错误。
实际应用中，商家数据集通常是从服务器获取的，而不是像示例中那样硬编码。
可以根据实际需求调整筛选距离和排序规则。

通过使用 HTML5 地理定位 API，我们可以轻松地实现附近商家推荐功能，为用户提供更个性化的服务。希望本文对你有所帮助！