jVectorMap错误:"未定义jvm"

Question

jVectorMap错误:"未定义jvm"

rdm*_*rza 6 javascript jquery json jvectormap

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Phi*_*rty 16

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

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

Run Code Online (Sandbox Code Playgroud)

实际上是一个调用JVM的JS文件,而不是实际的JVM库(这就是为什么你得到的"JVM未定义"错误.

我修复它的方法是获取文件

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

Run Code Online (Sandbox Code Playgroud)

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

那是ACTUAL JVM库,所以只要在你进行任何.vectorMap调用之前包含它,它就会很有用.

Answer 2

小智 5

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

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

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

Answer 3

Rij*_*hna -3

对 jVectorMap 没有太多了解，只是一个简单的观察。

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

归档时间：	13 年，6 月前
查看次数：	8058 次
最近记录：	8 年，2 月前