jVectorMap错误：“未定义jvm” [英] 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错误：“未定义jvm”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
