首先非常感谢网友宁宁的无私分享，此作品是她分享到JquerySchool网站上的第一款Jquery插件，实现了带提示层的中国地图，此Jquery插件功能非常强大，数据可以动态生成，解析Json数据，格式自己定义，cha对应china-zh.js中省份的简称，动态设定颜色，此处用了自定义简单的判断，可放大，缩小，拖拽。。。
页面初始化jquery代码如下：
$(function () {
//数据可以动态生成，格式自己定义，cha对应china-zh.js中省份的简称
var dataStatus = [{ cha: 'HKG', name: '香港', des: '学堂在香港九龙地区讲课，大家来报名哇' }];
$('#container').vectorMap({ map: 'china_zh',
color: "#ffccaa", //地图颜色
onLabelShow: function (event, label, code) {//动态显示内容
$.each(dataStatus, function (i, items) {
if (code == items.cha) {
label.html(items.name + items.des);
}
});
}
})
$.each(dataStatus, function (i, items) {
if (items.des.indexOf('个') != -1) {//动态设定颜色，此处用了自定义简单的判断
var josnStr = "{" + items.cha + ":'#00FF00'}";
$('#container').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
}
});
$('.jvectormap-zoomin').click(); //放大
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友宁宁 tip提示层 中国地图插件 map jQuery.adamMap.1.0 json数据解析 拖拽