萌新项目人 2016-04-22 12:41 采纳率: 100%
浏览 1603
已采纳

有没有什么好的JavaScript地图控件可以实现根据数据量变色、链接等,另外需要修改脚本一则

 <script type="text/javascript">
$(function(){
    var data = {"jiangsu":{"value":"<{$count5}>","stateInitColor":"4"},"heilongjiang":{"value":"<{$count4}>","stateInitColor":"3"},"henan":{"value":"<{$count2}>","stateInitColor":"0"},"anhui":{"value":"<{$count3}>","stateInitColor":"3"},"zhejiang":{"value":"<{$count9}>","stateInitColor":"4"},"beijing":{"value":"<{$count1}>","stateInitColor":"4"},"sichuan":{"value":"<{$count6}>","stateInitColor":"6"},"fujian":{"value":"<{$count8}>","stateInitColor":"5"},"gansu":{"value":"<{$count7}>","stateInitColor":"3"},"macau":{"value":"未知","stateInitColor":"7"},"hongkong":{"value":"未知","stateInitColor":"7"},"taiwan":{"value":"未知","stateInitColor":"7"},"xizang":{"value":"未知","stateInitColor":"7"}};
            var i = 1;
            for(k in data){
                if(i <= 12){
                    var _cls = i < 4 ? 'active' : ''; 
                    $('#MapControl .list1').append('<li name="'+k+'"><div class="mapInfo"><i class="'+_cls+'">'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
                }else if(i <= 24){
                    $('#MapControl .list2').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
                }else{
                    $('#MapControl .list3').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
                }
            }

            var mapObj_1 = {};
            var stateColorList = ['990a00', 'bf0c00', 'ee0e00', 'ff362a', 'ff7c74', 'ffd3d0', '#ffe4e1', 'ffffff'];

            $('#RegionMap').SVGMap({
                external: mapObj_1,
                mapName: 'china',
                mapWidth: 600,
                mapHeight: 510,
                stateData: data,
                // stateTipWidth: 118,
                // stateTipHeight: 47,
                // stateTipX: 2,
                // stateTipY: 0,
                stateTipHtml: function (mapData, obj) {
                    var _value = mapData[obj.id].value;
                    var _idx = mapData[obj.id].value;
                    var active = '';
                    _idx < 4 ? active = 'active' : active = '';
                    var tipStr = '<div class="mapInfo"><span>' + obj.name + '</span><b>' + _value + '</b></div>';
                    return tipStr;
                }
            });
            $('#MapControl li').hover(function () {
                var thisName = $(this).attr('name');

                var thisHtml = $(this).html();
                $('#MapControl li').removeClass('select');
                $(this).addClass('select');
                $(document.body).append('<div id="StateTip"></div');
                $('#StateTip').css({
                    left: $(mapObj_1[thisName].node).offset().left - 50,
                    top: $(mapObj_1[thisName].node).offset().top - 40
                }).html(thisHtml).show();
                mapObj_1[thisName].attr({
                    fill: '#E99A4D'
                });
            }, function () {
                var thisName = $(this).attr('name');

                $('#StateTip').remove();
                $('#MapControl li').removeClass('select');
                mapObj_1[$(this).attr('name')].attr({
                    fill: "#" + stateColorList[data[$(this).attr('name')].stateInitColor]
                });
            });

            $('#MapColor').show();
    //  }
    // });


    $('#WorldMap').SVGMap({
        mapName: 'world',
        mapWidth: 600,
        mapHeight: 400
    });
});
</script>

上面是个地图脚本,jiangsu":{"value":"<{$count5}>","stateInitColor":"4"}这是指江苏省的计数和变色,现在的色是4,希望修改成数据量超过1000的省份在这里显示6,数据量超过2千的显示5,跪求!

  • 写回答

1条回答

  • devmiao 2016-04-22 22:28
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题