为什么只有欧洲出现在我的 RaphaelJs 地图上？

Question

早上好。

我正在使用 Parallax 的 Raphael 地图教程制作一张包含可点击大陆的世界地图：https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

我一步一步地进行了所有操作，但是一旦我加载页面，我得到的唯一大陆就是我的第一个大陆，欧洲。请帮我找出我哪里错了，谢谢！我对使用 Raphael 等插件非常陌生。如果我需要 post 更多信息，请告诉我。

以下是我的 fiddle 显示的问题： https://jsfiddle.net/Nimara/jut2c40t/

示例代码（对于 post 坐标来说太大了）：

var rsr = Raphael('map', '770', '505.3');
var continents = [];

//Europe
var europe = rsr.path("coordinates jabber, see fiddle")
europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe');
continents.push(Europe);

//Asia
var asia = rsr.path("coordinates jabber, see fiddle")
asia.attr({
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'asia');
continents.push(asia);

//North America
var north_america = rsr.path("coordinates jabber, see fiddle")
north_america.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'north_america');
continents.push(north_america);

//Africa
var africa = rsr.path("coordinates jabber, see fiddle")
africa.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'africa');
continents.push(africa);

//South America
var south_america = rsr.path("coordinates jabber, see fiddle")
south_america.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'south_america');
continents.push(south_america);

//Australia
var australia = rsr.path("coordinates jabber, see fiddle")
australia.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'australia');
continents.push(australia);

//Iterate through the regions and select continent to fill with color
for (var i=0; i<continents.length; i++) {
    if (continents[i].data('id') == 'africa'){
    continents[i].node.setAttribute('fill', 'red');
}
}


//NOT SO SURE I NEED THIS BOTTOM HALF. With or without it the problem persists.
XMLID_1209_.attr(
{
'id': 'XMLID_1209_',
'name': 'XMLID_1209_'
});
var rsrGroups = [XMLID_1209_];
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia);

这是我处理的地图：http://www.amcharts.com/svg-maps/?map=continents

再次感谢！

Answer 1

Working example

你的脚本有问题：

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe');
continents.push(Europe);// javascript is case-sensitive

应该是：

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'});
europe.id='europe';
continents.push(europe);

未定义此方法：

.data

每个大洲都会重复出现。

for (var i=0; i<continents.length; i++) {
    if (continents[i].data('id') == 'africa'){
        continents[i].node.setAttribute('fill', 'red');
    }
}

应该是：

for (var i=0; i<continents.length; i++) {
    if (continents[i].id == 'africa'){
        continents[i].node.setAttribute('fill', 'red');
    }
}

这段代码实际上没有意义（XMLID_1209_未定义）：

XMLID_1209_.attr(
{
    'id': 'XMLID_1209_',
    'name': 'XMLID_1209_'
});
var rsrGroups = [XMLID_1209_];
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia);

我建议您在每次调试脚本时查看您的开发人员工具（在您首选的浏览器中为 F12）；把这个建议当作一般规则。如下图所示：

错误很明显

为什么只有欧洲出现在我的 RaphaelJs 地图上？

Why is only Europe showing up on my RaphaelJs Map?

html

javascript

css

svg

imagemap