• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:09:32

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

一、引言

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

二、HTML5 地理定位 API 简介

HTML5 地理定位 API 允许网页获取用户的地理位置信息。该 API 提供了一些方法和属性，开发者可以利用这些方法和属性来获取用户的位置。主要的方法有：
| 方法 | 描述 |
| —— | —— |
| navigator.geolocation.getCurrentPosition() | 用于获取用户的当前位置，它接受三个参数：成功回调函数、失败回调函数和可选的配置对象。 |
| navigator.geolocation.watchPosition() | 用于持续监听用户的位置变化，每当用户位置发生变化时，会调用成功回调函数。 |
| navigator.geolocation.clearWatch() | 用于停止 watchPosition() 方法的监听。 |

三、实现思路

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

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

四、演示代码

HTML 部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>附近商家推荐</title>
  8.     <style>
  9.         body {
  10.             font-family: Arial, sans-serif;
  11.         }
  13.         #result {
  14.             margin-top: 20px;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20.     <h1>附近商家推荐</h1>
  21.     <button onclick="getLocation()">查找附近商家</button>
  22.     <div id="result"></div>
  24.     <script src="script.js"></script>
  25. </body>
  27. </html>

JavaScript 部分（script.js）

  1. // 模拟商家数据集，每个商家包含名称、经度和纬度
  2. const merchants = [
  3.     { name: '商家 A', lat: 30.0001, lon: 120.0001 },
  4.     { name: '商家 B', lat: 30.0002, lon: 120.0002 },
  5.     { name: '商家 C', lat: 30.0003, lon: 120.0003 },
  6.     { name: '商家 D', lat: 30.0004, lon: 120.0004 },
  7.     { name: '商家 E', lat: 30.0005, lon: 120.0005 }
  8. ];
  10. // 计算两点之间的距离（单位：千米）
  11. function calculateDistance(lat1, lon1, lat2, lon2) {
  12.     const R = 6371; // 地球半径，单位：千米
  13.     const dLat = (lat2 - lat1) * (Math.PI / 180);
  14.     const dLon = (lon2 - lon1) * (Math.PI / 180);
  15.     const a =
  16.         Math.sin(dLat / 2) * Math.sin(dLat / 2) +
  17.         Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *
  18.         Math.sin(dLon / 2) * Math.sin(dLon / 2);
  19.     const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  20.     return R * c;
  21. }
  23. // 获取用户位置
  24. function getLocation() {
  25.     if (navigator.geolocation) {
  26.         navigator.geolocation.getCurrentPosition(showPosition, showError);
  27.     } else {
  28.         document.getElementById('result').innerHTML = "浏览器不支持地理定位。";
  29.     }
  30. }
  32. // 显示用户位置并查找附近商家
  33. function showPosition(position) {
  34.     const userLat = position.coords.latitude;
  35.     const userLon = position.coords.longitude;
  37.     // 计算每个商家与用户的距离
  38.     const nearbyMerchants = [];
  39.     for (let i = 0; i < merchants.length; i++) {
  40.         const merchant = merchants[i];
  41.         const distance = calculateDistance(userLat, userLon, merchant.lat, merchant.lon);
  42.         if (distance <= 1) { // 筛选距离在 1 千米以内的商家
  43.             nearbyMerchants.push({...merchant, distance });
  44.         }
  45.     }
  47.     // 按距离排序
  48.     nearbyMerchants.sort((a, b) => a.distance - b.distance);
  50.     // 显示附近商家信息
  51.     let resultHTML = '<h2>附近商家列表</h2>';
  52.     if (nearbyMerchants.length === 0) {
  53.         resultHTML += '<p>附近没有符合条件的商家。</p>';
  54.     } else {
  55.         resultHTML += '<ul>';
  56.         for (let i = 0; i < nearbyMerchants.length; i++) {
  57.             const merchant = nearbyMerchants[i];
  58.             resultHTML += `<li>${merchant.name}，距离：${merchant.distance.toFixed(2)} 千米</li>`;
  59.         }
  60.         resultHTML += '</ul>';
  61.     }
  62.     document.getElementById('result').innerHTML = resultHTML;
  63. }
  65. // 处理地理定位错误
  66. function showError(error) {
  67.     switch (error.code) {
  68.         case error.PERMISSION_DENIED:
  69.             document.getElementById('result').innerHTML = "用户拒绝了地理定位请求。";
  70.             break;
  71.         case error.POSITION_UNAVAILABLE:
  72.             document.getElementById('result').innerHTML = "位置信息不可用。";
  73.             break;
  74.         case error.TIMEOUT:
  75.             document.getElementById('result').innerHTML = "获取位置信息超时。";
  76.             break;
  77.         case error.UNKNOWN_ERROR:
  78.             document.getElementById('result').innerHTML = "发生未知错误。";
  79.             break;
  80.     }
  81. }

五、代码解释

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

六、注意事项

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

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