SVGMAP自定义中国地图和世界地图【原创

来源:https://www.sucaihuo.com/js/419.html 2015-08-20 08:18浏览(10406) 收藏

svgMap是一个基于Raphael的SVG地图组件,可以兼容ie6+现代浏览器,支持中国地图和世界地图的SVG制作。本文介绍了svgMap8个实例演示。
SVGMAP自定义中国地图和世界地图
分类:其它特效 > 地图 难易:中级
查看演示 下载资源 下载积分: 110 积分

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
});

之前分享了<a href='http://www.sucaihuo.com/js/415.html'>jQuery+SVGMap制作中国地图</a>

声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/419.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2