SVGMAP自定义中国地图和世界地图

svgMap是一个基于Raphael的SVG地图组件，可以兼容ie6+现代浏览器，支持中国地图和世界地图的SVG制作。本文介绍了svgMap8个实例演示。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：其它特效 > 地图难易：中级

查看演示下载资源下载积分： 30 积分

HTML

生成中国地图#ChinaMap

<div id="ChinaMap"></div>

引入SVGMAP相关组件

<script type="text/javascript" src="js/lib/jquery.js"></script> 
<script type="text/javascript" src="js/lib/raphael-min.js"></script> 
<script type="text/javascript" src="js/res/chinaMapConfig.js"></script> 
<script type="text/javascript" src="js/res/worldMapConfig.js"></script> 
<script type="text/javascript" src="js/map.js"></script>

演示一：中国地图

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

演示二：自定义宽高

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

演示三：自定义数据-json

$('#ChinaMap').SVGMap({ 
    mapName: 'china', 
    stateData: { 
        'heilongjiang': {'stateInitColor': 1, 'baifenbi': 0.236}, 
        'beijing': {'stateInitColor': 2}, 
        'shanghai': {'stateInitColor': 3} 
    } 
});

演示四：自定义数据-xml

$('#ChinaMap').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) + '<br>name:' + obj.name; 
    } 
});

演示六：hover回调

$('#ChinaMap').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 
});

之前分享了jQuery+SVGMap制作中国地图

SVGMAP自定义中国地图和世界地图 收藏