0

我正在尝试自定义此地图：http: //jsfiddle.net/allankiezel/FJrNN/

我不能做的是：

  1. 在鼠标悬停时显示每个状态的名称或缩写
  2. 将每个状态链接到一个单独的 URL（而不是在点击时将其变为绿色）

负责地图行为的 JS 代码：

var rsrGroups = [CA, OR, WA, NV, AZ, ID, UT, MT, WY, NM, CO, TX, NE, SD, ND, OK, KS, MN, IA, MO, AR, LA, WI, IL, MS, TN, KY, IN, AL, MI, FL, OH, GA, NC, VA, WV, SC, PA, MD, NJ, DE, VT, MA, CT, NH, ME, RI, NY, AK, HI];

for (var i = 0, len = rsrGroups.length; i <= len; i++) {

var el = rsrGroups[i];

el.mouseover(function() {
    this.toFront();
    this.attr({
        cursor: 'pointer',
        fill: '#990000',
        stroke: '#fff',
        'stroke-width': '2'
    });
    this.animate({
        scale: '1.2'
    }, 200);
});
el.mouseout(function() {
    this.animate({
        scale: '1.05'
    }, 200);
    this.attr({
        fill: '#003366'
    });
});
el.click(function() {
    this.animate({
        fill: 'green'
    }, 200);
});

}
4

1 回答 1

1

您必须先将属性附加到数据

CA.attr({
    fill: '#003366',
    id: 'CA',
    name: 'CA',
    href : 'http://www.california.com',
    title : 'California'
});

如果您有这些属性，您可以在鼠标悬停功能中访问它们，现在您必须确定要在哪里显示标签，您可以在容器中执行此操作，或者如果您想在地图上执行此操作，则必须设置它也为每个状态放置属性。

您必须在 mouseover 函数中显示状态属性并将其隐藏在 mouseout 函数中。

编辑：如果你想显示一个工具提示，你可以简单地设置属性标题编辑 2：将属性设置为 href 和标题，但似乎引用干扰了 .toFront()

于 2013-02-04T20:26:12.337 回答