Question

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

我无法做的是：

在鼠标悬停时显示每个州的名称或缩写
将每个州链接到一个单独的网址（而不是点击时将其设为绿色）

负责地图行为的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);
});

}

Answer 1

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

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

如果您有这些属性，您可以在鼠标悬停功能中访问它们，现在您必须确定要显示标记的位置，您可以在容器中执行此操作，或者如果您想在地图上执行此操作，您将拥有为每个州设置这个地方的属性。

你必须在鼠标悬停功能中显示状态属性并将其隐藏在mouseout函数中。

编辑：如果要显示工具提示，只需设置属性标题即可编辑2：将属性设置为href和title，但似乎引用干扰.toFront（）

JS交互式地图：显示状态名称＆amp;创建链接

1 个答案: