Question

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

可能存在汽车彼此非常靠近的情况，在这种情况下，一个跟踪器的图标可能过度标记另一个跟踪器。有覆盖图标是正常的，但标签应始终在视线中。

我需要一个对上层跟踪器的标签进行分组的方法。请帮忙！我甚至不知道从哪里开始！

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

Answer 1

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

假设您有三辆车这样的阵列：

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;   
    }
  }
}

你的标签类应该定位label-element：

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

Here is a fiddle显示了这种方法。

如何在JavaScript + Canvas中对上层对象进行分组？

1 个答案: