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

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

WBOY
Release: 2016-06-02 11:27:28
Original
978 people have browsed it

脚本地图javascript控件php

<code> <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++)+'<span>'+chinaMapConfig.names[k]+'<b>'+data[k].value+'')                }else if(i <= 24){                    $('#MapControl .list2').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'<span>'+chinaMapConfig.names[k]+'<b>'+data[k].value+'')                }else{                    $('#MapControl .list3').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'<span>'+chinaMapConfig.names[k]+'<b>'+data[k].value+'')                }            }            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 + '<b>' + _value + '';                    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">');                $('#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></code>
Copy after login

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template