如何使用过滤器获取数组的属性

Question

我正在尝试从以下数组中获取匹配项，比较浏览器中的坐标与数组中的坐标，但是当我调用 const 'matchgeosucursal' 时我得到了一个 'undefined' 值即使我强制匹配过滤器的条件，这段代码的目标是获取匹配场景的URL，我想我使用的过滤器函数是错误的。

//Request permissions
$( document ).ready(function getLocation() {
  
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
      console.log ("Geolocation is not supported by this browser.");
    }

    
//Filter and gets match url

function showPosition(position) {  
  console.log("Latitude: " + position.coords.latitude)
  console.log("Longitude: " + position.coords.longitude);
  var navlat = position.coords.latitude; //Browser lat
  var navlon = position.coords.longitude; // Browser lon

  // Array
  var 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"}];
  
//Match result
  const matchgeosucursal = sucursales.filter( sucursales =>  sucursales.lat === navlat && sucursales.lon === navlon);
  console.log('Match> ' + matchgeosucursal);

       
 }

});

Answer 1

它工作正常，唯一的问题是 console.log 不能正确打印对象。我在测试中使用了 console.table ，一切看起来都不错：

注意：我将 position 设为常量，因为我无法像您那样从文档中提取坐标。但只要 position.coords.latitude 和 ...longitude

的值正确，它就会工作

const position = {
  coords: {
    latitude: 21.0335386,
    longitude: -89.559187,
  }
}

function showPosition(position) {
  console.log("Latitude: " + position.coords.latitude)
  console.log("Longitude: " + position.coords.longitude);
  var navlat = position.coords.latitude; //Browser lat
  var navlon = position.coords.longitude; // Browser lon

  // Array
  var 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"}];

//Match result
  const matchgeosucursal = sucursales.filter( sucursales =>  sucursales.lat === navlat && sucursales.lon === navlon);
  console.log("Match:")
  console.table( matchgeosucursal);


 }


showPosition(position)

Answer 2

您得到未定义的结果很可能是因为您的过滤器正在寻找纬度和经度的精确匹配，而用户的地理位置不够准确，无法查明您要过滤的确切纬度和经度.

要获得匹配，您可以检查用户的纬度和经度是否在一个范围内，如下所示：

const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat +.005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon +.005));

这将使您在大约半英里范围内准确。显然，您可以根据用例的需要调整您想要使用的范围。

//Request permissions
$( document ).ready(function getLocation() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        console.log ("Geolocation is not supported by this browser.");
    }


//Filter and gets match url

    function showPosition(position) {
        console.log("Latitude: " + position.coords.latitude)
        console.log("Longitude: " + position.coords.longitude);
        var navlat = position.coords.latitude; //Browser lat
        var navlon = position.coords.longitude; // Browser lon

        // Array
        var 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"}];

//Match result
        const matchgeosucursal = sucursales.filter( sucursales =>
            sucursales.lat >= (navlat -.005) &&
            sucursales.lat <= (navlat +.005) &&
            sucursales.lon >= (navlon -.005) &&
            sucursales.lon <= (navlon +.005));
        
        console.log('Match > \nlat: ' + matchgeosucursal[0].lat +"\nlon: " + matchgeosucursal[0].lon + "\nurl: " + matchgeosucursal[0].url);


    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何使用过滤器获取数组的属性

How to get the property of an array using filter

javascript

filter

geolocation

如何使用过滤器获取数组的 属性

How to get the property of an array using filter

javascript

filter

geolocation

如何使用过滤器获取数组的属性