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='https://jy.tp.yuanmeng.life/js/415.html'>jQuery+SVGMap制作中国地图</a>