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

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

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

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

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 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自定义中国地图和世界地图 收藏