jquery.vmap.js报Uncaught TypeError 无法读取setFill属性问题求助
报错根因
报错的核心原因是setColors方法接收到字符串类型的key时,this.countries[key]返回undefined,尝试调用undefined的setFill方法触发了类型错误。
对比源码可以看到,批量设置颜色的else分支做了if (this.countries[code])的非空校验,但是单个key设置的if分支缺失这个校验,属于源码本身的逻辑疏漏。
常见触发场景
- 传入的国家/区域编码不符合当前vmap地图的编码规范,比如大小写错误、使用了地图不支持的编码标准(如误用三位ISO国家码,而地图仅支持两位ISO编码)
- 调用
setColors的时机早于vmap地图初始化完成时间,this.countries对象还未完成填充 - 使用自定义地图时,传入的区域编码没有在地图配置中提前注册
解决方法
- 调用侧适配:调用
setColors前先校验传入的编码是否在地图支持的编码列表中,避免传入非法编码 - 源码修复:给单个key的处理分支增加非空判断,和批量处理逻辑对齐,修改后代码如下:
setColors: function (key, color) { if (typeof key == 'string') { // 新增非空校验,避免访问undefined属性 if (this.countries[key]) { this.countries[key].setFill(color); this.countries[key].setAttribute("original", color); } } else { var colors = key; for (var code in colors) { if (this.countries[code]) { this.countries[code].setFill(colors[code]); this.countries[code].setAttribute("original", colors[code]); } } } },
- 调用时机调整:确保
setColors在vmap地图的load事件回调中执行,不要在初始化阶段提前调用。
内容的提问来源于stack exchange,提问作者Andrija Petrovic
相关产品推荐
相关产品推荐

