在json对象中查找项目

Question

可以说这个对象

var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }

好了，正如您所看到的，它有一个ID（Isora，Pepe，Australia，Otro），每个ID都有Cordinades（leftX，topY）和另一个要显示的名称（名称）

我正在使用它来对图片进行地理标记，
我已经完成了将鼠标悬停在项目上的部分，并在地图上突出显示了要显示的名称和名称，现在我需要做相反的事情； 如果我将鼠标悬停在地图上的区域，则需要突出显示列表中（以及地图上）的项目

所以可以说我有这只老鼠

x = 270

and     

y = 55   

我如何检查是否有以下项（id）：x + -30（leftX）和y + -30（topY）？

+ -30是错误的余量（显然，用户很难用鼠标指向确切的金字塔形）

Answer 1

function find(x, y) {
    for (var key in paises) {
        if (paises.hasOwnProperty(key)) {
            var current = paises[key];

            if (Math.abs(current.leftX - x) < 30 && Math.abs(current.topY - y) < 30) {
                return current;
            }
        }
    }
}

然后，您将其称为：

var found = find(270, 55);

if (found == undefined) {
    // none found
} else {
    // found = the one found!
}

当然，如果不需要匹配的函数，则可以轻松地将函数更改为返回布尔值。

Answer 2

for (var key in paises) {
    if (paises.hasOwnProperty(key)) {
        var item = paises[key];
        if (item.leftX > x - 30 && item.leftX < x + 30 &&
            item.topY > y - 30 && item.topY < y + 30) {
            // DO STUFF!
        }
    }
}

根据您的描述，您应该将leftX和topY重命名为centerX和centerY 。

但要注意的是，我实际上将创建可单击的HTML元素，而不是使用对象属性进行定位-然后使用click事件将这些元素连接起来。 这样，您将无需计算任何内容，因为您可以通过简单的CSS属性更改“可点击区域”的大小。

Answer 3

首先，您可以定义一个确定点是否在误差范围内的函数：

function isInErrorMargin(px, py, vx, vy) { // p = reference point, v = actual point
    return vx >= px - 30
        && vx <= px + 30
        && vy >= py - 30
        && vy <= py + 30;
}

然后，使用$.each进行迭代，检查每个元素：

var found;

$.each(paises, function() {
    if(isInErrorMargin(this.leftX, this.topY, x, y)) {
        found = this;
        return false; // stop
    }
});

Answer 4

function find(obj,test,args) {
    var ret = {};
    for(var i in obj) {

        if(obj.hasOwnProperty(i) && test.apply(obj[i],args) === true) {
            ret[i] = obj[i];
        }
    }
    return ret;
}

var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }

var found = find(paises,function(x,y){
    if(this.hasOwnProperty("leftX") && this.hasOwnProperty("topY") && Math.abs(this.leftX - x) < 30 && Math.abs(this.topY - y) < 30) {
        return true;
    }
    else {
        return false;
    }
},[565,220]);
console.log(found)

该find算法在obj （第一个参数）对象中搜索任何返回true到测试函数（第二个参数）的对象。 如果需要，还可以将参数传递给测试函数。