Question

在导师“使用SVG和jQuery动态地理地图”中，我想使用<br>在信息框中添加更多信息，但信息框会消失。请参阅下面的示例。

$(function() {

for(i = 0; i < regions.length; i++) {

    $('#'+ regions[i].region_code)
    .css({'fill': 'rgba(11, 104, 170,' + regions[i].population/highest_value +')'})
    .data('region', regions[i]);
}

$('.map g').mouseover(function (e) {
    var region_data=$(this).data('region');
    $('<div class="info_panel">'+
        region_data.region_name + '<br>' +
        'Test: ' + region_data.test + '<br>' +
        'Population: ' + region_data.population.toLocaleString("en-UK") +
        '</div>'
     )
    .appendTo('body');
})
.mouseleave(function () {
    $('.info_panel').remove();
})
.mousemove(function(e) {
    var mouseX = e.pageX, //X coordinates of mouse
        mouseY = e.pageY; //Y coordinates of mouse

    $('.info_panel').css({
        top: mouseY-50,
        left: mouseX - ($('.info_panel').width()/2)
    });
});

});

Answer 1

我在js部分进行了一些小修改

首先添加更多数据

    $('<div class="info_panel">' +
              region_data.region_name + '<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +
              '</div>'
            )

然后修改了这个：

$('.info_panel').css({
        top: mouseY - $('.info_panel').height() - 20,
        left: mouseX - ($('.info_panel').width() / 2)
      });

这似乎解决了这个问题。

检查修改后的codepen

在信息框，使用SVG和jQuery的地图上添加更多信息

1 个答案: