基于Raphael.js的svg多功能地图插件

SVG 地图(By Rocky)

中国地图--默认

		            $('#ChinaMap').SVGMap({
						mapName: 'china'
					});
                

自定义宽高

$('#ChinaMap1').SVGMap({
	mapName: 'china',
	mapWidth: 600,
	mapHeight: 500
});
                

自定义数据-json

$('#ChinaMap2').SVGMap({
		mapName: 'china',
		stateData: {
	                'heilongjiang': {'stateInitColor': 1, 'baifenbi': 0.236},
	                'beijing': {'stateInitColor': 2},
	                'shanghai': {'stateInitColor': 3},
	                'tianjin': {'stateInitColor': 4},
	                'sichuan': {'stateInitColor': 5},
	                'shandong': {'stateInitColor': 6},
	                'shanxi': {'stateInitColor': 3},
	                'zhejiang': {'stateInitColor': 4},
	                'jiangshu': {'stateInitColor': 2},
	                'hunan': {'stateInitColor': 4},
	                'guizou': {'stateInitColor': 5},
	                'neimenggu': {'stateInitColor': 6},
	                'henan': {'stateInitColor': 3},
	                'gansu': {'stateInitColor': 4},
	                'ningxia': {'stateInitColor': 2},
	                'jilin': {'diabled': true}
            	}
	});
                

自定义数据-xml

$('#ChinaMap3').SVGMap({
	mapName: 'china',
	stateDataType: 'xml',
	stateSettingsXmlPath: 'js/res/chinaMapSettings.xml'
});
                

提示自定义

$('#ChinaMap4').SVGMap({
	stateTipHtml: function(stateData, obj){
		return 'id:' + ((stateData)[obj.id] && (stateData)[obj.id].baifenbi || obj.id) + '
name:' + obj.name; } });

hover回调

$('#ChinaMap5').SVGMap({
       hoverCallback: function(stateData, obj){
           $('#HoverCallback').html('hover:'+obj.name);
       }
});
                

click回调

$('#ChinaMap6').SVGMap({
       clickCallback: function(stateData, obj){
           $('#ClickCallback').html('点击了:'+obj.name);
       }
});
                

外部事件改变地图内容

  改变山东的颜色   改变四川的颜色
var mapObj = {};
	$('#ChinaMap7').SVGMap({
        external: mapObj
	});
	$('#ChangeMap').click(function(){
		mapObj.shandong.attr({fill: '#111'});
		mapObj.shandong.mouseout(function(){
			this.animate({
                fill: '#ddd'
            }, 250);
		});
	});
	$('#ChangeMap1').click(function(){
		mapObj.sichuan.attr({fill: '#00f'});
		mapObj.sichuan.mouseout(function(){
			this.animate({
                fill: '#f0f'
            }, 250);
		});
	});
                

不显示提示

$('#ChinaMap8').SVGMap({
        showTip: false
	});

                

外部控制

        
        	var data = {"jiangsu":{"value":"30.05%","index":"1","stateInitColor":"0"},"henan":{"value":"19.77%","index":"2","stateInitColor":"0"},"anhui":{"value":"10.85%","index":"3","stateInitColor":"0"},"zhejiang":{"value":"10.02%","index":"4","stateInitColor":"0"},"liaoning":{"value":"8.46%","index":"5","stateInitColor":"0"},"beijing":{"value":"4.04%","index":"6","stateInitColor":"1"},"hubei":{"value":"3.66%","index":"7","stateInitColor":"1"},"jilin":{"value":"2.56%","index":"8","stateInitColor":"1"},"shanghai":{"value":"2.47%","index":"9","stateInitColor":"1"},"guangxi":{"value":"2.3%","index":"10","stateInitColor":"1"},"sichuan":{"value":"1.48%","index":"11","stateInitColor":"2"},"guizhou":{"value":"0.99%","index":"12","stateInitColor":"2"},"hunan":{"value":"0.78%","index":"13","stateInitColor":"2"},"shandong":{"value":"0.7%","index":"14","stateInitColor":"2"},"guangdong":{"value":"0.44%","index":"15","stateInitColor":"2"},"jiangxi":{"value":"0.34%","index":"16","stateInitColor":"3"},"fujian":{"value":"0.27%","index":"17","stateInitColor":"3"},"yunnan":{"value":"0.23%","index":"18","stateInitColor":"3"},"hainan":{"value":"0.21%","index":"19","stateInitColor":"3"},"shanxi":{"value":"0.11%","index":"20","stateInitColor":"3"},"hebei":{"value":"0.11%","index":"21","stateInitColor":"4"},"neimongol":{"value":"0.04%","index":"22","stateInitColor":"4"},"tianjin":{"value":"0.04%","index":"23","stateInitColor":"4"},"gansu":{"value":"0.04%","index":"24","stateInitColor":"4"},"shaanxi":{"value":"0.02%","index":"25","stateInitColor":"4"},"macau":{"value":"0.0%","index":"26","stateInitColor":"7"},"hongkong":{"value":"0.0%","index":"27","stateInitColor":"7"},"taiwan":{"value":"0.0%","index":"28","stateInitColor":"7"},"qinghai":{"value":"0.0%","index":"29","stateInitColor":"7"},"xizang":{"value":"0.0%","index":"30","stateInitColor":"7"},"ningxia":{"value":"0.0%","index":"31","stateInitColor":"7"},"xinjiang":{"value":"0.0%","index":"32","stateInitColor":"7"},"heilongjiang":{"value":"0.0%","index":"33","stateInitColor":"7"},"chongqing":{"value":"0.0%","index":"34","stateInitColor":"7"}};
        			var i = 1;
        			for(k in data){
        				if(i <= 12){
        					var _cls = i < 4 ? 'active' : ''; 
        					$('#MapControl .list1').append('
      • '+(i++)+''+chinaMapConfig.names[k]+''+data[k].value+'
      • ') }else if(i <= 24){ $('#MapControl .list2').append('
      • '+(i++)+''+chinaMapConfig.names[k]+''+data[k].value+'
      • ') }else{ $('#MapControl .list3').append('
      • '+(i++)+''+chinaMapConfig.names[k]+''+data[k].value+'
      • ') } } var mapObj_1 = {}; var stateColorList = ['003399', '0058B0', '0071E1', '1C8DFF', '51A8FF', '82C0FF', 'AAD5FF']; $('#RegionMap').SVGMap({ external: mapObj_1, mapName: 'china', mapWidth: 350, mapHeight: 350, 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].index; var active = ''; _idx < 4 ? active = 'active' : active = ''; var tipStr = '
        ' + _idx + '' + obj.name + '' + _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'); $('#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
        	});
                        

        科e互联网页特效集锦---更多特效请访问 www.internetke.com

        本站导航: 网站建设 | 网页素材 | 网页特效 | 设计分享 | 建站教程 | 网站模版 | 酷站赏析

        *尊重他人劳动成果,转载请自觉注明出处!注:此代码为【科e整理/原创特效】仅供学习交流,请勿用于商业用途。 加入QQ交流群