Question

我通过以下方式成功实施了美国地图jQuery插件：http://newsignature.github.io/us-map/#usage-style-options

效果很好，我甚至可以自定义尺寸，状态颜色和悬停颜色。目前的问题是，一旦点击状态，插件就会被设置为显示状态ID 例如：点击弗吉尼亚州，你得到了VA＆＃39; VA＆＃39;在结果下 - 我需要为每个州的结果添加唯一的HTML，而不仅仅是我刚刚点击的州ID ...有什么建议吗？

它的基本配置是：

<script src="https://raw.githubusercontent.com/NewSignature/us-map/master/lib/raphael.js">

和

<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>

和

$('#map').usmap({
  // The click action
  click: function(event, data) {
    $('#clicked-state')
      .text('You clicked: '+data.name)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

通过Rory的建议更新：

 var stateData = {
     VA: { fullName: 'Virginia' }
    // other states' data...
    },
  click: function(event, data) {
    $('#clicked-state')
        // .text('You clicked: '+data.name)
        .text('You clicked: ' + stateData[data.name].fullName) // = "Virginia
        .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

Answer 1

根据要显示的数据的复杂程度，您可以将其存储在一个对象中，并以状态名称键入。这是一个基本示例，显示如何扩展信息以包含状态的全名：

var stateData = {
    VA: { fullName: 'Virginia' }
    // other states' data...
}

// in map settings:
click: function(event, data) {
    $('#clicked-state')
        .text('You clicked: ' + stateData[data.name].fullName) // = "Virginia
        .parent().effect('highlight', { color: '#C7F464' }, 2000);
}

jQuery US Map插件 - 为每个点击状态添加唯一的.html

1 个答案: