Question

我正在尝试重新创建美国失业的jVectorMap示例可视化。我直接从github获取了代码。地图，不会加载，控制台给我这个错误：“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>

Answer 1

我有同样的问题。问题是您下载的ZIP文件将您重定向到

<script src="../jquery-jvectormap.js"></script>

实际上是一个调用JVM的JS文件，而不是实际的JVM库（这就是为什么你得到“JVM未定义”错误。

我修复它的方法是取文件

http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js

并将其包含在我的项目中。

那是ACTUAL JVM库，所以只要在你进行任何.vectorMap调用之前包含它，它就会非常适合你。

Answer 2

所以你使用的不是缩小的js文件。它只包含没有库的主代码。

要解决此错误，您需要2个解决方案：

添加所有需要的库。您可以在lib/目录中找到它。文件示例以及您需要添加的订单，您可以在tests/index.html文件
创建缩小的js。您需要使用NIX系统并执行./build.sh。也许您需要安装uglifyjs utility，例如您可以install npm from here然后执行npm install uglify-js@1

Answer 3

看起来缩小的文件包含jquery-jvectormap.js不需要的所有各种文件。因此，如果您要使用非缩小版本，则应准备手动加载jquery-jvectormap.js所需的所有各种文件，例如map.js，vector-canvas.js，e.t.c。如果您从the jvector maps website

获取文件，可以在/src目录中找到这些内容

Answer 4

statesValues，metroPopValues和metroUnempValues变量声明应该是以;终止的声明。您目前使用,结束了这些行。

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));

Answer 5

如果您仍想在本地保存正确的文件，例如，如果您使用的是凉亭，那么您也可以在GitHub上使用this "built" version of jvectormap。

Answer 6

如果您下载了zip或从GitHub克隆：转到您下载的目录并执行build.sh文件。这将生成缩小的文件，供您使用所有正确的依赖项。

在Mac上： source build.sh

或者您可以使用npm 安装依赖项： npm install jvectormap --save，然后使用您node_modules中的缩小文件。

Answer 7

不仅仅关于jVectorMap，还有一个简单的观察。

在您的代码中，变量'jvm'无法定义。检查代码中使用的JS文件并查看'jvm'变量的任何初始化是不是一个好主意？

jVectorMap错误：“未定义jvm”

7 个答案: