Question

我正在使用来自newsignature的jquert（http://newsignature.github.com/us-map/）处理一个非常酷的交互式美国地图。我无法确定如何在点击时为每个州输入唯一信息。换句话说，当用户点击华盛顿时，他们会获得某些信息，而不是点击阿肯色州。甚至可能有内容风格的能力。

我目前使用的代码是：

$(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);
    }
  });


});

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

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

交互式美国地图功能

1 个答案: