在拉斐尔JS世界地图中添加国家点击操作

Add click action to countries in raphael JS world map

本文关键字：国家 添加 操作 世界地图 JS      更新时间：2024-04-28

我正在制作一张世界地图，你可以使用raphaeljs和world.js形状点击一个地区（北美、亚洲等）

@David Noël开源了一种将国家组合成一个元素的方法，当你滚动时会突出显示，我已经成功地做到了。

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

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

好吧，所以在亲自联系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'});
});

});

希望我不会太迟^^'好吧，在进行了一点"检查元素"之后，我只添加了一个路径的点击侦听器，然后我获取id或名称，或者每当。。。。

只需添加：

  $('path').click(function() {
             console.log(this.id);
             //do what you want with the id, name...you can make an ajax 
             call or anything you want
        });

如果你想要一个完整的例子，你可以去：

window.onload = function () {
    // Create canvas and define attributes shared by all paths.
    var R = Raphael("container", 620, 690),
      attr = {
      "fill": "#b9b9b9",
      "stroke": "#fff",
      "stroke-miterlimit": "4",
      "stroke-width": "1",
      "transform": "s0.06,0.06,60,0" // Scales the path to a useful size.
    }; 
    // Define map object. 
    var africaMap = {};
    for (var nation in africaPaths) {
      // Draw a path, then apply attributes to it.
      africaMap[nation] = R.path(africaPaths[nation]).attr(attr);
      // Name the internal Raphael id after the africaPaths property name.
      africaMap[nation].id = nation;
      // Name the element id after the africaPaths property name.
      africaMap[nation].node.id = nation;
    }
    // For an example of interaction via Raphael, uncomment the line below.
   var demo1 = R.getById('tanzania').attr({"fill": "green"});
   $('path').click(function() {
             console.log(this.id);
             // here you do what you want ^^
        });  
  };

希望这能帮助到别人，并为我的英语感到抱歉。

相关文章：