<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jquery地图插件">
<meta name="keywords" content="jquery,jquery插件,jsmap,jsmap地图">
<title>jsMap</title>
<style>
*{margin:0;padding:0;outline:0}
html{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-text-size-adjust:100%}
body{background:#f5f5f5}
main{display:block}
ul{list-style:none}
a{text-decoration:none;color:#2285ee}
#container{position:relative;overflow:hidden;margin:0 auto;width:1010px;height:auto;background:#fff;box-shadow:#d6d6d6 0 0 15px}
</style>
</head>
<body>
<div id="container">
<h1>jsMap 地图插件</h1>
<div id="map"></div>
</div>
</body>
<script src="/js/map/jquery-1.9.0.min.js"></script>
<script src="/js/map/jsMap-2.0.0.min.js"></script>
<script>
$(function () {
jsMap.json( "/js/map/map.json" ).done(function ( response ) {
//jsMap.config( "#demo-01", response ); 基础区块
jsMap.config( "#map", response, {
//定义区块的颜色和宽度
/*stroke: {
width: 2,
color: "#000"
}*/
//disabled: [ "heilongjiang", "jilin", "liaoning" ], 禁用区域
//定义区块的填充色 悬浮色 点击色
/*fill: {
basicColor: "#259200",
hoverColor: "#57cb00",
clickColor: "#2e6f18"
}，*/
//显示区域文字和点击时的文字颜色
/*areaName: {
show: true,
clickColor: "#fff"
}*/
//自定义悬浮提示框
/*tip: function ( id, name ) {
return '<div style="background:#fff;padding:20px;"><p>id: ' + id + '</p><p>name: ' + name + '</p></div>';
},*/
//自定义指定区域的填充色 / 悬浮色 / 点击色
fill: {
basicColor: {
heilongjiang: "#ff5900",
jilin: "#19bb00",
liaoning: "#6800ff",
jiangxi:"#8a3434"
},
hoverColor: {
heilongjiang: "#ff8c4e",
jilin: "#1fe000",
liaoning: "#954dff"
},
clickColor: {
heilongjiang: "#c94600",
jilin: "#159a00",
liaoning: "#5200c9"
},
},
//悬浮回调函数
/*hoverCallback: function ( id, name ) {
console.log( id + " --- " + name );
alert( "666 --- 999");
}*/
// multiple: true 点击选择多个区域
});
})
})
</script>
</html>
//在线实例 http://jsmap.applinzi.com/
