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），每个都有cordinades（leftX，topY）和另一个名字来显示（name）

我用这个来标记图片，
我已经完成了我悬停项目的部分，我在地图中突出显示了cordinades和要显示的名称，现在我需要做相反的事情;如果我将地图悬停在地图中，我需要突出显示列表中的项目（以及地图中）

所以，让我说我有这个鼠标荚膜

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 algorythm在obj（第一个参数）对象中搜索任何返回true的对象，该对象返回true给测试函数（第二个参数）。如果需要，您还可以将参数传递给测试函数。

在json对象中查找项目

4 个答案: