jQuery+SVGMap制作中国地图

分享一款很酷炫的中国地图插件：SVGMap，SVG画图可以兼容ie6+和其他浏览器，使用raphael作为引擎。可以自定义宽高、自定义数据-json、自定义数据-xml、提示自定义、hover回调、click回调、外部事件改变地图内容、不显示提示、外部控制、世界地图。

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

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

HTML

在#mapTipContent添加省市，每个.mapTipList有一个省和对应的市区列表。

<div id="mapTipContent" style="width: 900px;margin: 0 auto;display: none">
    <div class="mapTipText mapTipText0">
        <div class="mapTipImg"><img src="images/heilongjiang.jpg" alt=""/></div>
        <div class="mapTipList">
            <h2><a href="">黑龙江<span>Heilongjiang</span></a></h2>
            <ul>
                <li><a href="http://www.sucaihuo.com/js/">哈尔滨</a></li>
                <li><a href="">漠河</a></li>
                <li><a href="http://www.sucaihuo.com/js/418.html">五大连池</a></li>
                <li><a href="">兴凯湖</a></li>
                <li><a href="">雪乡</a></li>
                <li><a href="">大兴安岭</a></li>
                <li><a href="">齐齐哈尔</a></li>
                <li><a href="">牡丹江</a></li>
                <li><a href="">伊春</a></li>
                <li><a href="">大庆</a></li>
                <li><a href="">镜泊湖</a></li>
                <li><a href="">帽儿山</a></li>
            </ul>
        </div>
    </div>
</div>

引入jQuery库和中国地图插件

<script src="js/lib/jquery-1.11.1.min.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/map-min.js"></script>

chinaMapConfig.js中国地图数据

var chinaMapConfig = {
    width: 565,//地图宽
    height: 475,
    shapes: {
        heilongjiang: 'M464.838,96.639l6.787-1.19l2.854,5.241l4.285,3.095l2.856-1.188h2.386l4.285-2.501l3.094,3.094l2.024,0.357l5.357-2.023l3.813,2.023l1.666,4.288h2.857l1.43,1.904l3.689,4.049l1.426-0.833l-0.594-5.12l2.026-1.432l2.854,5.716l2.621,1.074l2.858,3.212l2.021-0.357l0.836-1.427l4.523-5.12l2.022,1.428l1.43-2.022l1.431,2.619l4.283,1.429h2.86l2.07,0.088l-1.238-2.113l-0.598-6.906l-5.115-7.978l2.855-2.857l2.616-4.883h9.646l1.785-1.665l-0.597-3.69l2.025-3.691l-0.596-2.024l0.832-3.451l-0.236-17.742l2.855-5.715l-3.214-3.692l0.595-2.261l-1.427-2.024l-3.69,1.429l-4.289,4.884l-4.283,2.023l-4.289,5.951l-10.598,3.692l-4.879-3.692l0.594-2.262l-2.5-3.689l-1.191-3.811l-4.047-0.239l-7.145-3.69l-2.859,1.071l-3.33-1.667l-4.887,0.834l-4.283-1.429l-2.621-3.69l-2.498-2.857l-0.951-2.857l-3.334-3.452l-2.026-3.099l-4.644-6.31l-1.428-3.69l-5.119-6.548l-1.432-3.454l-6.549-3.216l-4.287,1.429l-3.689-0.833l-8.336-1.668l-11.07,3.932l-2.024,1.786l2.262,3.096l-2.856,7.499l0.834,0.835l4.881,3.096l2.621-4.286l4.524,2.856l-0.235,2.022l1.664,5.119l2.854,3.218l5.717,0.833l1.668-1.787l3.451-0.477l6.547-5.476l8.576,6.31l-2.858,11.669l0.594,8.333v5.119l-2.26,1.191l-0.238,13.335l-0.597-0.476l-2.26-2.858h-1.192l-0.595,1.073c0,0-8.797,13.044-7.146,10.596c1.652-2.448-3.451,4.523-3.451,4.523l0.357,1.428l7.145,4.886l3.926-1.071l0.599,1.071l-0.834,1.189l-3.689,1.667l-0.359,3.214L464.838,96.639z',
        jilin: 'M544.896,113.042l-2.07-0.088h-2.858l-4.285-1.431l-1.43-2.619l-1.431,2.024l-2.022-1.428l-4.523,5.12l-0.834,1.427l-2.022,0.357l-2.859-3.214l-2.621-1.072l-2.854-5.715l-2.027,1.431l0.594,5.12l-1.426,0.833l-3.689-4.05l-1.432-1.903h-2.854l-1.666-4.288l-3.813-2.023l-5.354,2.023l-2.025-0.357l-3.098-3.094l-4.285,2.5h-2.383l-2.857,1.191l-4.285-3.096l-2.854-5.24l-6.787,1.189l-2.621,3.099l-0.238,3.45l-7.502-2.023l-1.074,2.381l0.601,1.667l3.928,2.859v4.046l0.594,3.929l2.265,3.456l0.356,3.095l1.666,1.191l5.717-5.479l5.953,7.502v4.288l3.213,1.667l0.238-1.431l4.885,1.431l3.451,4.046l1.666-1.784l0.357-1.074l8.217,11.075l0.594,4.286l4.527,5.239l0.592,4.761l4.051-2.499l3.689-10.598l1.67-0.595l4.047,2.263l6.549-0.834l2.26-2.024l-3.092-4.763l0.832-1.191c0,0,7.84-2.611,6.072-2.022c-1.766,0.588,2.5-4.883,2.5-4.883l3.215-1.428l0.238-4.766l0.832-3.212l1.785-0.596l1.668,1.789l1.668,1.426l4.287-5.715l1.188-4.288L544.896,113.042z',
    },
    names: {
        heilongjiang: {id: 0, name: '黑龙江', x: 75, y: 75, color: "ffe7b8", direction: "left"},
        jilin: {id: 1, name: '吉林', x: 42, y: 25, color: "c0f0ff", direction: "left"},
    }
};

具体SVGMap插件相关详细调用方法，请查看<a href='http://www.sucaihuo.com/js/419.html'>SVGMAP自定义中国地图和世界地图</a>