jVectorMap 错误:"jvm is not defined" [英] jVectorMap error: "jvm is not defined"
问题描述
我正在尝试重新创建美国失业情况的 jVectorMap 示例可视化.我直接从 github 获取了代码.地图不会加载，控制台给我这个错误:jvm 未定义."
I'm trying to recreate the jVectorMap example visualization of US unemployment. I took the code straight from github. The map, won't load and the console gives me this error: "jvm is not defined."
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Maps</title>
<link rel="stylesheet" media="all" href="../jvectormap/jquery-jvectormap.css"/>
<link rel="stylesheet" media="all" href="css/jquery-ui-1.8.21.custom.css"/>
<script src="../jvectormap/tests/assets/jquery-1.8.2.js"></script>
<script src="../jquery-jvectormap.js"></script>
<script src="../jvectormap/tests/assets/jquery-jvectormap-us-aea-en.js"></script>
<script src="jquery-ui-1.8.21.custom.min.js"></script>
<script>
$(function(){
$.getJSON('data.json', function(data){
var val = 2009;
statesValues = jvm.values.apply({}, jvm.values(data.states)),
metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));
$('.map').vectorMap({
map: 'us_aea_en',
markers: data.metro.coords,
series: {
markers: [{
attribute: 'fill',
scale: ['#FEE5D9', '#A50F15'],
values: data.metro.unemployment[val],
min: jvm.min(metroUnemplValues),
max: jvm.max(metroUnemplValues)
},{
attribute: 'r',
scale: [5, 20],
values: data.metro.population[val],
min: jvm.min(metroPopValues),
max: jvm.max(metroPopValues)
}],
regions: [{
scale: ['#DEEBF7', '#08519C'],
attribute: 'fill',
values: data.states[val],
min: jvm.min(statesValues),
max: jvm.max(statesValues)
}]
},
onMarkerLabelShow: function(event, label, index){
label.html(
'<b>'+data.metro.names[index]+'</b><br/>'+
'<b>Population: </b>'+data.metro.population[val][index]+'</br>'+
'<b>Unemployment rate: </b>'+data.metro.unemployment[val][index]+'%'
);
},
onRegionLabelShow: function(event, label, code){
label.html(
'<b>'+label.html()+'</b></br>'+
'<b>Unemployment rate: </b>'+data.states[val][code]+'%'
);
}
});
var mapObject = $('.map').vectorMap('get', 'mapObject');
$(".slider").slider({
value: val,
min: 2005,
max: 2009,
step: 1,
slide: function( event, ui ) {
val = ui.value;
mapObject.series.regions[0].setValues(data.states[ui.value]);
mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
}
});
});
})
</script>
</head>
<body>
<div class="map" style="width: 800px; height: 600px"></div>
<div class="slider" style="width: 280px; margin: 10px"></div>
</body>
</html>
推荐答案
我遇到了完全相同的问题.问题是您下载的 ZIP 文件会将您重定向到
I had this exact same problem. The problem is the ZIP file you downloaded that redirects you to
<script src="../jquery-jvectormap.js"></script>
实际上是一个调用 JVM 的 JS 文件，而不是实际的 JVM 库(这就是您收到JVM 未定义"错误的原因.
Is actually a JS file that invokes JVM, not the actual JVM library (Which is why you're getting the "JVM Is not Defined" error.
我修复它的方法是获取文件
The way I fixed it was to take the file
http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js
并将其包含在我的项目中.
and include it in my project.
这是 ACTUAL JVM 库，因此只要在您进行任何 .vectorMap 调用之前将其包含在内，它就会非常适合您.
That's the ACTUAL JVM library, so as long as that's included before you make any .vectorMap calls, it'll work out just great for you.
这篇关于jVectorMap 错误:&quot;jvm is not defined&quot;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
