6

我正在尝试重新创建美国失业的 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>
4

7 回答 7

16

我有这个完全相同的问题。问题是您下载的 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 调用之前包含它，它就会非常适合您。

于 2013-02-04T06:58:54.270 回答
5

因此，您使用的是未缩小的 js 文件。它只包含没有库的主要代码。

要修复此错误，您有 2 个解决方案：

  1. 添加所有需要的库。您可以在lib/目录中找到它。带有文件的示例以及您需要添加的顺序，您可以在tests/index.html文件 中找到

  2. 创建缩小的 js。您需要使用 NIX 系统并执行./build.sh. 也许你需要安装uglifyjs 实用程序，例如你可以从这里安装 npm然后执行npm install uglify-js@1

于 2013-01-24T10:44:13.913 回答
1

看起来缩小的文件包含所有需要的各种文件，而jquery-jvectormap.js没有。因此，如果您想使用非缩小版本，那么您应该准备手动加载所需的所有各种文件jquery-jvectormap.js，例如map.js，等如果您从jvector maps 网站vector-canvas.js获取文件，这些可以在目录中找到/src

于 2016-09-17T22:44:45.267 回答
0

, 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));
于 2013-01-15T01:11:11.760 回答
0

如果您仍然想在本地保存正确的文件，例如如果您使用的是 bower，那么您也可以在 GitHub 上使用这个“内置”版本的 jvectormap 。

于 2014-12-27T17:33:51.303 回答
0

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

在 Mac 上： source build.sh

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

于 2018-05-22T18:34:36.887 回答
-2

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

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

于 2013-01-14T10:13:13.910 回答