如何使用filter方法获取数组属性 解决坐标匹配返回undefined问题

问题根因 #

• filter 方法返回的是所有符合条件的元素组成的数组，而非单个匹配对象。即使匹配成功，直接访问数组的url属性必然返回undefined，建议改用find方法，直接返回第一个符合条件的对象，无匹配时返回undefined。
• 浏览器返回的经纬度是高精度浮点数（通常小数点后10位以上），你数组中存储的坐标仅保留了6-7位小数，用===做全等匹配基本不可能命中。你可以设定允许的误差范围，只要坐标差值在误差范围内就判定为匹配即可。
• 你的filter回调参数名和外层数组名重名，虽然不会直接报错，但容易引发逻辑混淆，建议调整命名。

修复后的代码 #

// 请求位置权限
$( document ).ready(function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
      console.log("当前浏览器不支持地理定位服务");
    }

    // 匹配坐标获取对应URL
    function showPosition(position) {  
      console.log("纬度：" + position.coords.latitude)
      console.log("经度：" + position.coords.longitude);
      const navlat = position.coords.latitude; // 浏览器获取的纬度
      const navlon = position.coords.longitude; // 浏览器获取的经度
      // 允许的误差值，0.0001大概对应10米左右的误差，可根据需求调整
      const allowedOffset = 0.0001;

      // 网点坐标数组
      const sucursales = [
        {lat: 21.924089, lon: -102.293378, url: "https://shorturl.at/test1"},
        {lat: 21.859964, lon: -102.298034, url: "https://shorturl.at/test2"},
        {lat: 32.45569, lon: -116.836181,  url: "https://shorturl.at/test3"},
        {lat: 24.114868, lon: -110.340389, url: "https://shorturl.at/test4"},
        {lat: 21.0335386, lon: -89.559187, url: "https://shorturl.at/test5"}
      ];
  
      // 匹配坐标
      const matchgeosucursal = sucursales.find( item =>  
        Math.abs(item.lat - navlat) < allowedOffset 
        && Math.abs(item.lon - navlon) < allowedOffset
      );
      // 打印匹配结果
      console.log('匹配结果：', matchgeosucursal);
      // 匹配成功后可直接取url使用
      if (matchgeosucursal) {
        console.log('匹配到的URL：', matchgeosucursal.url);
      }
    }
});

如果需要更大的匹配范围，比如100米级别，把allowedOffset改成0.001即可，经纬度每相差0.0001大概对应地面10米左右的距离，这个换算值在中低纬度区域误差很小，足够普通场景使用。

内容的提问来源于stack exchange，提问作者Gabo RM