扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
当时遇到这个地图也是花了一些功夫解决了点击跳转的需求,当时是实现了效果,但没有优化,提供给你参考。
创新互联主要从事成都网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务伊川,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
这个地图插件依据浏览器不同,生成的地图代码不同,建议多测试一下。
在脚本最后注释的那个 alert就是click事件,自行替换即可。
实际的参考网站在百度发不出来地址,需要可以私信我。
//数据可以动态生成,格式自己定义,cha对应china-zh.js中省份的简称
var dataStatus = [{ cha: 'HKG', name: '香港', des: '' },
{ cha: 'HAI', name: '海南', des: '' },
{ cha: 'YUN', name: '云南', des: 'br/' },
{ cha: 'BEJ', name: '北京', des: 'br/' },
{ cha: 'TAJ', name: '天津', des: 'br/' },
{ cha: 'XIN', name: '新疆', des: '' },
{ cha: 'TIB', name: '西藏', des: '' },
{ cha: 'QIH', name: '青海', des: '' },
{ cha: 'GAN', name: '甘肃', des: 'br/' },
{ cha: 'NMG', name: '内蒙古', des: 'br/' },
{ cha: 'NXA', name: '宁夏', des: 'br/' },
{ cha: 'SHX', name: '山西', des: 'br/' },
{ cha: 'LIA', name: '辽宁', des: 'br/' },
{ cha: 'JIL', name: '吉林', des: 'br/' },
{ cha: 'HLJ', name: '黑龙江', des: 'br/' },
{ cha: 'HEB', name: '河北', des: 'br/' },
{ cha: 'SHD', name: '山东', des: 'br/' },
{ cha: 'HEN', name: '河南', des: 'br/' },
{ cha: 'SHA', name: '陕西', des: '' },
{ cha: 'SCH', name: '四川', des: 'br/' },
{ cha: 'CHQ', name: '重庆', des: '' },
{ cha: 'HUB', name: '湖北', des: 'br/' },
{ cha: 'ANH', name: '安徽', des: 'br/' },
{ cha: 'JSU', name: '江苏', des: 'br/' },
{ cha: 'SHH', name: '上海', des: '' },
{ cha: 'ZHJ', name: '浙江', des: 'br/' },
{ cha: 'FUJ', name: '福建', des: '' },
{ cha: 'TAI', name: '台湾', des: '' },
{ cha: 'JXI', name: '江西', des: '' },
{ cha: 'HUN', name: '湖南', des: '' },
{ cha: 'GUI', name: '贵州', des: '' },
{ cha: 'GXI', name: '广西', des: 'br/' },
{ cha: 'GUD', name: '广东', des: 'br/'}];
$('#container').vectorMap({ map: 'china_zh',
color: "#95cee9", //地图颜色
onLabelShow: function (event, label, code) {//动态显示内容
$.each(dataStatus, function (i, items) {
if (code == items.cha) {
label.html(items.name + items.des);
}
});
}
})
var hasNum = new Array();
$.each(dataStatus, function (i, items) {
if (items.des.indexOf('br') != -1) {//动态设定颜色,此处用了自定义简单的判断
var josnStr = "{" + items.cha + ":'#1c84b7'}";
hasNum.push(items.cha);
$('#container').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
}
});
$('.jvectormap-zoomin').click(); //放大
$('#container').find("*[id*='jvectormap1']").each(function(){
var _this = $(this);
var _thisid = $(this).attr('id');
for (var i=0; ihasNum.length; i++){
if(_thisid.indexOf(hasNum[i]) != -1){
_this.click(function(){
//alert(_thisid)
})
}
}
})
各有各的牛气,说说我知道的:
JavaScript 语言:周爱民、老赵、玉伯、hax, 月影、CatChen, winter, 白露飞 等等
DOM 和浏览器兼容性:winter, 司徒正美、屈超、怿飞 等等
HTML 和 CSS:彪叔、aoao, 怿飞、macji 等等
类库框架:玉伯、JK, cnberg, yiminghe, 元彦 等等
前端布道士:克军、玉伯、怿飞、秦歌、小马 等等
不知分到哪一类的:hujinpu, 李牧、winter, dexteryy, 李超、老鱼、太伯、陈成 等等一堆人
还有游戏领域,Flash 达人等等,肯定漏了 n 多牛人,欢迎补充。
基本上没有。但是我们在设计和实现时还是应该考虑这些问题的。最基本的一点就是:当用户禁用javascript或浏览器javascript出错时也可以让用户进行简单的操作。
国内优秀web前端Javascript框架库:
Arale(支付宝) -
Como(盛大) -
EasyJs -
EdoJs -
DWZ -
JX(腾讯) -
JSI -
KISSY(淘宝) -
KindEditor -
Mass -
ModJS(腾讯) -
ModuleJS(腾讯) -
NEJ(网易) -
NJF -
Puerh(百姓网) -
QWrap(百度) -
SeaJS(淘宝) -
Tangram(百度) -
UEditor(百度) -
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流