jsMap 地图插件

插件介绍

这是一个功能丰富的jQuery地图插件,采用 SVG 技术展示了中国绝大部分地区的地图,它拥有非常全面的参数,开发者可根据实际需求灵活配置。

( 声明:插件中的所有地图数据均来自于网络,不保证其准确性和权威性,仅供个人学习交流使用,不承担任何商业用途及其它任何责任。 )

( 注:插件显示了绝大部分主要地区,其它未显示的地区不代表没有,如果有需求,请开发者自行添加相应的扩展。 )



基础地图

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data );
        })
    </script>

显示地区名称

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                areaName: {
                    show: true
                }
            });
        })
    </script>

可选择多个地区

    <div id="map"></div>
    <button id="refresh">刷新</button>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                multiple: true
            });
        })
        $( "#refresh" ).on("click", function () {
            jsMap.refresh( "#map" );
        })
    </script>

自定义描边颜色和宽度

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                stroke: {
                    width: 2,
                    color: "#333"
                }
            });
        })
    </script>

自定义填充色 / 悬浮色 / 点击色

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                fill: {
                    basicColor: "#259200",
                    hoverColor: "#57cb00",
                    clickColor: "#2e6f18"
                }
            });
        })
    </script>

自定义指定区域的填充色 / 悬浮色 / 点击色

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                fill: {
                    basicColor: {
                        heilongjiang: "#ff5900",
                        jilin: "#19bb00",
                        liaoning: "#6800ff"
                    },
                    hoverColor: {
                        heilongjiang: "#ff8c4e",
                        jilin: "#1fe000",
                        liaoning: "#954dff"
                    },
                    clickColor: {
                        heilongjiang: "#c94600",
                        jilin: "#159a00",
                        liaoning: "#5200c9"
                    }
                }
            });
        })
    </script>

禁用指定区域

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                disabled: {
                    name: [ "heilongjiang", "jilin", "liaoning" ]
                }
            });
        })
    </script>

禁用指定区域(反选)

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                disabled: {
                    name: [ "heilongjiang", "jilin", "liaoning" ],
                    except: true
                }
            });
        })
    </script>

自定义悬浮提示框

    <div id="map"></div>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                tip: function ( id, name ) {
                    return '<div style="background:#eee;padding:15px;"><p>id: ' + id + '</p><p>name: ' + name + '</p></div>';
                }
            });
        })
    </script>

悬浮回调函数

    <div id="map"></div>
    <p></p>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                hoverCallback: function ( id, name ) {
                    $( "p" ).html( id + " --- " + name );
                }
            });
        })
    </script>

点击回调函数

    <div id="map"></div>
    <p></p>

    <script>
        jsMap.json( "json/china.json" ).done(function ( data ) {
            jsMap.config( "#map", data, {
                clickCallback: function ( id, name ) {
                    $( "p" ).html( id + " --- " + name );
                }
            });
        })
    </script>

使用方法及全部参数属性

    01. jsMap.json( url ) 获取地图数据;
    02. jsMap.config( selector, jsonData, options ) 进行地图配置 [ options 参数可以省略 ];
    03. jsMap.remove( selector ) 用来移除地图;
    04. jsMap.refresh( selector ) 可以刷新地图,使其恢复初始状态;

    jsMap.json( "json/china.json" ).done(function ( data ) {

        jsMap.config("#map", data, {
            name: "china",
            width: 900,
            height: 500,
            stroke: {
                width: 1,
                color: "#000"
            },
            fill: {
                basicColor: "#3f99f9",
                hoverColor: "#fff11c",
                clickColor: "#dd2d01"
            },
            areaName: {
                show: true,
                size: 12,
                basicColor: "#000",
                clickColor: "#000"
            },
            disabled: {
                color: "#bfbfbf",
                except: false,
                name: [
                    "zhejiang", 
                    "hunan"
                ],
            },
            hide: [ "hainan", "yunnan" ],
            multiple: false,
            tip: true,
            hoverCallback: function () {},
            clickCallback: function () {}
        });

    })
属性 说明 类型 默认值
name 地图名称,设置 china 则绘制中国绝大部分地区的地图(其它未显示的地区不代表没有,如果有需求,请开发者自行添加相应的扩展),若要设置省份的地图,需要传入该省份的汉语全拼( 注意:山西是 shanxi,陕西是 shaanxi ) String china
width 地图容器的宽度 Number 900
height 地图容器的高度 Number 500
stroke.width 描边宽度 Number 1
stroke.color 描边颜色 String #f3f3f3
fill.basicColor 填充颜色 String / Object #3f99f9
fill.hoverColor 鼠标悬浮时的填充颜色 String / Object #0880ff
fill.clickColor 鼠标点击后的填充颜色 String / Object #006bde
areaName.show 是否显示地区名称 Boolean false
areaName.size 地区名称的文字大小 Number 12
areaName.basicColor 地区名称的文字颜色 String #333
areaName.clickColor 地区名称的文字点击后的颜色 String #fff
disabled.color 禁用地区的填充色 String #bfbfbf
disabled.except 禁用地区的反选,即禁用指定地区以外的所有地区 Boolean false
disabled.name 禁用地区的名称 Array []
hide 隐藏指定的地区 Array []
multiple 可以点击多个区域 Boolean false
tip 鼠标悬浮时的内容提示 Boolean / Function true
hoverCallback 悬浮回调函数,参数分别是:id 和 name Function 空函数
clickCallback 点击回调函数,参数分别是:id 和 name Function 空函数