0

我正在使用此插件制作交互式美国地图，在初始加载时，一个状态（FL）将默认填充悬停颜色，效果很好。当鼠标悬停在任何状态时，我需要从状态（FL）中删除那些默认（填充）颜色。这是我的代码

$(document).ready(function () {
    $("#map-container").usmap({
        stateStyles: {
            fill: "#8B1109",
            stroke: "#fff",
            "stroke-width": 1,
            "stroke-linejoin": "round",
            scale: [1, 1],
        },
        stateHoverStyles: {
            fill: "#58adaf",
            stroke: "#fff",
            scale: [1.1, 1.1],
        },
        stateHoverAnimation: false,
        stateSpecificStyles: {
            FL: {
                fill: "#58adaf",
            },
        },
        mouseover: function (event, data) {
            console.log(data);
        },
    });
});

我的要求是悬停在任何状态默认状态（Fl）应该恢复正常颜色。

当前状态：

默认状态

要求：当鼠标移到加利福尼亚州时，佛罗里达州应填充默认颜色

提前致谢

4

1 回答 1

0

这通过添加新属性（id）和更改鼠标悬停事件中的颜色帮助我实现了我的要求。

文件“jquery.usmap.js”的变化</p>

由此：

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, "cursor": "pointer"});
  this.stateHitAreas[state].node.dataState = state;
}

对此：

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
  stateAttr = {};
  if(this.options.stateSpecificStyles[state]) {
    $.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
  } else {
    stateAttr = attr;
  }
  this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
  this.topShape = this.stateShapes[state];

  this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
  this.stateHitAreas[state].node.dataState = state;
  this.stateShapes[state].node.setAttribute("id", state); // New attribute
}

js文件的变化（配置）

$('#map-container').usmap({
    'stateSpecificStyles': {
        'FL': {
            fill: "#58adaf",
        }
    },
    'mouseover': function (event, data) {
        $('#map-container > svg > path').each(function (e) {
            $(this).css('fill', '#8B1109');
        })
        $('#' + data.name).css('fill', '#58adaf');
    }
});
于 2021-06-22T09:20:37.113 回答