0

拜托，我需要一些帮助！好的，有带有画布的 HTML5 文档。Javascript 在画布上呈现地图。在地图上，有跟踪器可以显示城市中汽车的位置。每个跟踪器 - 它是带有文本标签的图标，包含数字。

可能会出现汽车彼此非常靠近的情况，在这种情况下，一个跟踪器的图标可能会过度标记另一个跟踪器。有重叠的图标是正常的，但标签应该始终可见。

我需要一个对重叠跟踪器的标签进行分组的算法。请帮忙！我什至不知道从哪里开始！

PS：这应该在没有任何第三方库的情况下完成，除了 jQuery 和 jQuery UI（客户的要求）。

4

1 回答 1

0

从来没有这样做过，但这是我的想法：

假设您有一组这样的三辆汽车：

var cars=[{name:"car1",x:100,y:101},{name:"car2",x:99,y:101},{name:"car3",x:90,y:111}];

我将首先按位置对其进行排序：

cars.sort(sortfunction)

function sortfunction(a, b){
   return a.x - b.x + a.y - b.y
}

然后，当您将汽车放在地图上时，请查看之前的位置。如果它在附近，请添加标签类：

var label=0;
for(var i=0; i<cars.length; i++) {
  if(i>=1) {
    if(Math.abs(cars[i-1].x-cars[i].x+cars[i-1].y-cars[i].y)<10) {
      //Add your element with a label class $("<div class='car label"+label+"' style='...'>")
       console.log(cars[i-1].name+" is to near to "+cars[i].name);
      label++;
    }
    else {
      //Add your element normal $("<div class='car' style='...'>")
       label=0;   
    }
  }
}

您的标签类应定位标签元素：

.label0 {
    /* position north */
}
.label1 {
    /* position west*/
}
.label2 {
    /* position east*/
}
/* can go on with nw, ne, se and sw if needed*/

这是一个显示这种方法的小提琴。

于 2013-04-24T07:25:02.417 回答