Javascript jVectorMap错误："；jvm未定义“未定义”；_Javascript_Jquery_Json_Jvectormap

Javascript jVectorMap错误："；jvm未定义“未定义”；

javascript jquery json

Javascript jVectorMap错误："；jvm未定义“未定义”；,javascript,jquery,json,jvectormap,Javascript,Jquery,Json,Jvectormap,我试图重现美国失业的jVectorMap示例可视化。我直接从我的电脑上获取了密码。映射不会加载，控制台会给我这个错误：“jvm未定义。” 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Maps</title> <link rel="stylesheet" media="all"

我试图重现美国失业的jVectorMap示例可视化。我直接从我的电脑上获取了密码。映射不会加载，控制台会给我这个错误：“jvm未定义。”

代码如下：

  <!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>


地图
$（函数（）{
$.getJSON（'data.json'，函数（数据）{
var=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.demousion））；
$（'.map'）.vectorMap({
地图：“美国-欧洲-欧洲”，
标记：data.metro.coords，
系列：{
标记：[{
属性：'填充'，
比例：[“FEE5D9”、“A50F15”]，
值：data.metro.demousion[val]，
min:jvm.min（metrounemplvalue），
max:jvm.max（metrounemplvalue）
},{
属性：“r”，
比例：[5,20]，
值：data.metro.population[val]，
min:jvm.min（MetropopValue），
max:jvm.max（MetropopValue）
}],
区域：[{
比例：['#DEEBF7'，'#08519C']，
属性：'填充'，
值：data.states[val]，
min:jvm.min（状态值），
max:jvm.max（状态值）
}]
},
onMarkerLabelShow：函数（事件、标签、索引）{
label.html(
''+data.metro.names[index]+'
+
'人口：'+data.metro.Population[val][index]+'
'+
“失业率：”+data.metro.demission[val][index]+'%
);
},
onRegionLabelShow：函数（事件、标签、代码）{
label.html(
''+label.html（）+'
'+
'失业率：'+data.states[val][code]+'%
);
}
});
var mapObject=$（'.map'）.vectorMap（'get'，'mapObject'）；
$（“.slider”）.slider({
值：val，
民:2005,，
最高：2009年，
步骤：1，
幻灯片：功能（事件、用户界面）{
val=ui.value；
mapObject.series.regions[0].setValues（data.states[ui.value]）；
mapObject.series.markers[0].setValues（data.metro.demission[ui.value]）；
mapObject.series.markers[1].setValues（data.metro.population[ui.value]）；
}
});
});
})

关于jVectorMap的内容不多，只是一个简单的观察

在代码中，没有定义变量“jvm”。检查代码中使用的JS文件并查看“jvm”变量的任何初始化不是一个好主意吗

变量声明的

statesValues

、

metroPopValues

和

metroponempvalues

语句应以

结尾。您当前以，
结束行
var val = 2009;
var statesValues = jvm.values.apply({}, jvm.values(data.states));
var metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population));
var metroUnemplValues = Array.prototype.concat([], jvm.values(data.metro.unemployment));

所以您使用的是未缩小的js文件。它只包含没有库的主代码
要修复此错误，您有两种解决方案：
添加所有需要的库。您可以在lib/
目录中找到它。在tests/index.html
文件中可以找到文件示例以及需要添加的顺序
创建缩小的js。您需要使用NIX系统并执行/build.sh
。例如，您可能需要安装，然后执行npm install uglify-js@1

我也有同样的问题。问题是您下载的ZIP文件将您重定向到
<script src="../jquery-jvectormap.js"></script>

并将其包括在我的项目中
这是实际的JVM库，因此只要在您进行任何.vectorMap调用之前包含它，它就会非常适合您。
如果您仍然希望在本地保存正确的文件，例如，如果您正在使用bower，然后您也可以在GitHub上使用。
缩小的文件似乎包含了所需的所有文件，而jquery jvectormap.js
没有。因此，如果您想使用非精简版本，那么您应该准备手动加载jquery jvectormap.js
所需的所有文件，例如map.js
，vector canvas.js，e.t.c。
如果您从
下载zip或从GitHub克隆文件，则可以在/src
目录中找到这些文件：转到下载的目录并执行build.sh
文件。这将生成缩小的文件，供您与所有适当的依赖项一起使用
在Mac上：
sourcebuild.sh

或者您可以直接使用npm
安装依赖项：
npm安装jvectormap——保存
，然后使用node\u模块中的缩小文件
谢谢您的建议，我做了更改，但对错误没有帮助！还要验证资源文件的路径是否正确，是否已成功加载。这个答案对我没有帮助，但我买了一个主题（Color Admin），它提供了我想要包含的不同版本的jvectormap（上一个开源操作系统），在这种情况下，我遇到了这个错误，使用提供的版本。我使用的是cloudflare CDN中的js文件，用于jvactormap库版本2.0.4，但不起作用。我用上面提到的本地js文件版本1.2.2替换了它，它成功了。由于某些原因，地图无法在2.0.4库中找到jvm。请阅读我的评论：哦，天哪，为什么他们的网站上没有这个？他们认为这是常识吗？
http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js