1

我有一张欧洲地图和一个 JSON 文件。JSON 文件显示了每个国家 2011 年的失业率。在 JSON 文件中还有 x 和 y 元素，因此我可以在地图中每个国家/地区的顶部放置一个蓝色圆圈。

我想要做的是，当我将鼠标悬停在其中一个圆圈（这是一个国家）上时，是从 JSON 文件中获取它的失业率并显示它。

我的问题是如何从我的 JSON 文件中的地图上悬停的特定国家/地区获取“汇率”元素？

JSON文件：

[
{ "year": "2011", "country": "Finland", "rate": 8.0, "x":681, "y":18 },
{ "year": "2011", "country": "Sweden", "rate": 7.6, "x":486, "y":114 },
{ "year": "2011", "country": "Estonia", "rate": 13.6, "x":625, "y":206 },
{ "year": "2011", "country": "Latvia", "rate": 17.1, "x":638, "y":239 },
{ "year": "2011", "country": "Lithuania", "rate": 16.7, "x":626, "y":274 },
{ "year": "2011", "country": "Denmark", "rate": 7.5, "x":388, "y":239 },
{ "year": "2011", "country": "Netherlands", "rate": 4.3, "x":322, "y":345 },
{ "year": "2011", "country": "United Kingdom", "rate": 7.7, "x": 178, "y": 281 },
{ "year": "2011", "country": "Ireland", "rate": 14.1, "x": 79, "y": 310 },
{ "year": "2011", "country": "Belgium", "rate": 7.1, "x": 306, "y": 398 },
{ "year": "2011", "country": "Luxembourg", "rate": 4.7, "x":328, "y":422 },
{ "year": "2011", "country": "Germany", "rate": 6.3, "x":402, "y":388 },
{ "year": "2011", "country": "Poland", "rate": 9.4, "x":574, "y":347 },
{ "year": "2011", "country": "Czech Republic", "rate": 6.8, "x":499, "y":419 },
{ "year": "2011", "country": "Slovakia", "rate": 13.6, "x":529, "y":418 },
{ "year": "2011", "country": "Hungary", "rate": 11.0, "x":496, "y":460 },
{ "year": "2011", "country": "Austria", "rate": 4.5, "x":440, "y":486 },
{ "year": "2011", "country": "Slovenia", "rate": 8.1, "x":481, "y":521 },
{ "year": "2011", "country": "France", "rate": 9.6, "x": 276, "y": 497 },
{ "year": "2011", "country": "Italy", "rate": 8.0, "x":448, "y":608 },
{ "year": "2011", "country": "Romania", "rate": 7.1, "x":681, "y":565 },
{ "year": "2011", "country": "Bulgaria", "rate": 11.2, "x": 671, "y": 600 },
{ "year": "2011", "country": "Greece", "rate": 15.2, "x": 617, "y": 693 },
{ "year": "2011", "country": "Spain", "rate": 20.7, "x": 150, "y": 663 },
{ "year": "2011", "country": "Portugal", "rate": 12.3, "x": 75, "y": 660 }
]

jQuery 文件

$(document).ready(function(){
$.getJSON("eu.json", function(data) {
console.log("Data loaded successfully");
$.each(data, function(i, elem) {
        $('<div></div>').addClass('dataPt').css({
            "margin-left": elem.x + "px",
            "margin-top": elem.y + "px",
            "border-width": elem.rate + 5 + "px"
        }).appendTo('#map');
        $('div.dataPt').hover(function(){
    $(this).addClass("dataPtHover");

},function(){
    $(this).removeClass("dataPtHover");
}); 
});
});
});

这是一个jsfiddle，所以你们可以更多地了解我想要做什么。

http://jsfiddle.net/RSEyg/

4

1 回答 1

2

最简单的方法是使用 jquery 数据，如下所示：（更新的小提琴：http: //jsfiddle.net/RSEyg/3/）

$(document).ready(function(){
  $.each(data, function(i, elem) {
            $('<div></div>').addClass('dataPt').css({
                "margin-left": elem.x + "px",
                "margin-top": elem.y + "px",
                "border-width": elem.rate + 5 + "px"
            }).appendTo('#map').data("rate", elem.rate);

    });

   $('div.dataPt').hover(function(){
        $(this).addClass("dataPtHover");
        $("#unResult").text($(this).data("rate"))        

    },function(){
        $(this).removeClass("dataPtHover");
    }); 


});

如果您需要获取每个点的国家/地区的其他属性，您可以将整个对象存储在数据中，并根据需要访问道具。

于 2013-11-02T20:30:46.087 回答