1

我正在使用来自 newsignature (http://newsignature.github.com/us-map/) 的 jquert 制作一个非常酷的交互式我们地图。单击时，我无法弄清楚如何为每个州输入唯一信息。换句话说，当用户点击华盛顿时，他们将获得某些信息，而不是点击阿肯色州时。甚至可能具有对内容进行样式化的能力。

我正在使用的当前代码是：

$(document).ready(function() {
  $('#map').usmap({
    'stateSpecificStyles': {
      'AK' : {fill: '#0F253F'}
    },
    'stateSpecificHoverStyles': {
      'HI' : {fill: '#0F253F'}
    },

    'mouseoverState': {
      'HI' : function(event, data) {
        //return false;
      }
    },


    'click' : function(event, data) {
      $('#alert')
        .text('Click '+data.name+'  copy ')
        .stop()
        .css('backgroundColor', '#ff0')
        .animate({backgroundColor: '#ddd'}, 1000);
    }
  });


});

我希望看到的是，当您单击特定状态时，它会显示有关该状态的信息与每个状态的相同信息。

4

1 回答 1

1

嗯，他们点击的状态是在data.name属性中。有很多方法可以解决这个问题。你试过什么？

$('#map').usmap({
  // The click action
  click: function(event, data) {
    var description = "No state info loaded for this state.";
    switch(data.name)
    {
        case 'IL':
            description = 'You clicked on the Land of Lincoln!';
            break;
        case 'MO':
            description = 'You clicked on the Show-Me State!';
            break;
        // etc
    }
    $('#clicked-state')
      .text(description)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

实际上，现在我查看了更多文档，您还可以像这样创建特定于状态的方法：

$('#map').on('usmapclickIL', function(event, data) {
    $('#clicked-state')
      .text('You clicked on the Land of Lincoln!')
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
});
于 2012-11-01T14:32:48.450 回答