javascript - 为拉斐尔 JS 世界地图中的国家/地区添加点击操作

Question

我正在制作一张世界地图，您可以在其中使用 raphaeljs 和 world.js 形状单击一个区域(北美、亚洲等)

@David Noël 开源了一个 way of combining countries into one element当你翻车时突出显示，我已经成功完成了。

我通常对 Javascript 没问题，但我不知道如何为这些区域创建点击事件，因此每个区域都会弹出一些相关信息。我认为上面的 Davids 链接中可能有答案，但我不完全理解文档

你可以在这里看到我到目前为止的进度.. http://thetally.efinancialnews.com/tallyassets/mapareas/index.html

Answer 1

好吧，在亲自联系了 David Noel 之后，他帮我找到了答案。

在任何地方初始化时，我都使用国家代码来创建国家组......

 <script src="anywhere.js"></script>
<script type="text/javascript">
  var aw = new Anywhere(
    document.getElementById('map_div'),
    {
<!--"AFRICA":["DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],-->
<!--"EUROPE":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME"],-->
"EMEA":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME","DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],
"NORTH AMERICA":["AI","AG","AW","BS","BB","BZ","BM","VG","CA","KY","CR","CU","CW","DM","DO","SV","GL","GD","GP","GT","HT","HN","JM","MQ","MX","PM","MS","CW","KN","NI","PA","PR","KN","LC","PM","VC","TT","TC","VI","US","SX","BQ"],
"SOUTH AMERICA":["AR","BO","BR","CL","CO","EC","FK","GF","GY","GY","PY","PE","SR","UY","VE"],
"ASIA":["AF","AM","AZ","BH","BD","BT","BN","KH","CN","CX","CC","IO","GE","HK","IN","ID","IR","IQ","IL","JP","JO","KZ","KP","KR","KW","KG","LA","LB","MO","MY","MV","MN","MM","NP","OM","PK","PH","QA","SA","SG","LK","SY","TW","TJ","TH","TR","TM","AE","UZ","VN","YE","PS"],
"PACIFIC":["AS","AU","NZ","CK","FJ","PF","GU","KI","MP","MH","FM","UM","NR","NC","NZ","NU","NF","PW","PG","MP","SB","TK","TO","TV","VU","UM","WF","WS","TL"]
},

..然后我的自定义 JS 文件看起来像这样...

// JavaScript Document

$( document ).ready(function() {


function changeChart() {

console.log('change');

if (dataSet == 1) {

var bank11 = 14
var bank12 = 74
var bank13 = 74

var bank21 = 45
var bank22 = 78
var bank23 = 111

var bank31 = 35
var bank32 = 75
var bank33 = 86 

} else if (dataSet == 2) {

var bank11 = 34
var bank12 = 74
var bank13 = 124

var bank21 = 45
var bank22 = 38
var bank23 = 211

var bank31 = 35
var bank32 = 15
var bank33 = 86 

}


$('.column1 .block1').animate({ 'height' : bank11 });
$('.column1 .block2').animate({ 'height' : bank12, 'bottom' : bank11 });
$('.column1 .block3').animate({ 'height' : bank13, 'bottom' : bank12+bank11  });

$('.column2 .block1').animate({ 'height' : bank21 });
$('.column2 .block2').animate({ 'height' : bank22, 'bottom' : bank21 });
$('.column2 .block3').animate({ 'height' : bank23, 'bottom' : bank22+bank21  });

}   


var dataSet = 0;


eve.on('aw:click', function (identifier, groupKey) {


if (groupKey == 'EMEA'){
dataSet = 1;
} 

if (groupKey == 'ASIA'){
dataSet = 2;
} 

changeChart();


console.log('you clicked ' + identifier +', in '+ groupKey);

$('.'+groupKey).css({"background-color":'#345'});

});


});