高分求javascript高手解决jvectormap中国地图问题,要求地图显示省份名称,点击省份可跳转指定连接。

当时遇到这个地图也是花了一些功夫解决了点击跳转的需求，当时是实现了效果，但没有优化，提供给你参考。

这个地图插件依据浏览器不同，生成的地图代码不同，建议多测试一下。

在脚本最后注释的那个 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 i<hasNum.length i++){    

if(_thisid.indexOf(hasNum[i]) != -1){    

_this.click(function(){    

//alert(_thisid)    

})    

}    

}    

})

lol,楼上仗剑折花的方法太幽默了，他那个完全是在模仿一种效果，如果是需要模仿就够了的话还不如直接做成几张图片切换，还可以做的更加美观，我觉得楼主是希望获得能判断经纬度的动态效果，不过如果要自己重头创建的话几乎不可能.不仅要用到web技术还需要gis技术以及具有空间地理坐标的地理数据，每一项都不是几个人能在短期完成的工程，另一点楼主要实现实现显示有意义的动态区域框的功能，如果是bs模式的话需要使用支持画图功能的语言，而这类语言当前浏览器支持均非常有限，替代方法是使用java applet，即编写java，

直观的概念，google map即包含楼主所要的经纬度的坐标数据，因为有这些数据所以你才能在google map上实现精确定位，画图功能google map也没有实现，你可以找一些web gis的一些更加高级的应用网站应该有这项功能，所以，google map解决这个问题也不是一天两天一个人两个人能做好的，要不就不会成为google的产品了。

解决办法，

你可以基于google提供的google map提供的api来创建你的应用，这样经纬度，地图数据以及主要的技术问题都由google map提供，你只需基于它创建自己的应用即可，但要知道如何使用google api也不是轻松的事。网上有很多关于google api学习的文章和著作，可先学习一下

可以用地图无忧

直接把excel数据导入平台内

平台会自动生成分布图

点击网点会显示出网点的属性字段

并可以在平台上展示动态数据统计结果

---