Ошибка jVectorMap: jvm не определен

Я пытаюсь воссоздать пример визуализации безработицы в США с помощью 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>

javascript json jquery jvectormap
person rdmirza    schedule 14.01.2013    source источник

Ответы (7)


arrow_upward
16
arrow_downward

У меня была точно такая же проблема. Проблема заключается в скачанном вами ZIP-файле, который перенаправляет вас на

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

На самом деле это файл JS, который вызывает JVM, а не фактическую библиотеку JVM (поэтому вы получаете ошибку «JVM не определена».

Способ, которым я это исправил, заключался в том, чтобы взять файл

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

и включить его в свой проект.

Это НАСТОЯЩАЯ библиотека JVM, поэтому, если она включена до того, как вы сделаете какие-либо вызовы .vectorMap, она отлично сработает для вас.

person Phil McCarty    schedule 04.02.2013
comment
Этот ответ на самом деле не помог мне, но я купил тему (Color Admin), которая предоставляет другую версию jvectormap, которую я хотел включить (последняя версия с открытым исходным кодом), или я получил эту ошибку, в этом случае используйте предоставленную версию . - person Loenix; 11.03.2016
comment
Я использовал файл js из CDN cloudflare для библиотеки jvactormap версии 2.0.4, он не работал. Я заменил его локальным файлом js версии 1.2.2, упомянутым выше, и это сработало. Карта почему-то не может найти jvm в библиотеке 2.0.4. - person echology; 20.08.2017
comment
Пожалуйста, прочитайте мои комментарии здесь: stackoverflow.com/questions/33775873/ - person Felix Aballi; 27.08.2020

arrow_upward
5
arrow_downward

Итак, вы используете не минимизированный файл js. Он содержит только основной код без библиотек.

Чтобы исправить эту ошибку, у вас есть 2 решения:

  1. Добавьте все необходимые библиотеки. Вы можете найти его в каталоге lib/. Пример с файлами и в каком порядке нужно добавлять вы найдете в tests/index.html файле

  2. Создайте минифицированный js. Вам нужно использовать систему NIX и выполнить ./build.sh. Возможно, вам потребуется установить утилиту uglifyjs, например, вы можете установите npm отсюда, а затем выполните npm install uglify-js@1

person Vladimir Fishchenko    schedule 24.01.2013
comment
Боже, почему этого нет на их сайте? Считают ли они это общеизвестным? - person Captain Hypertext; 29.12.2016

arrow_upward
1
arrow_downward

Похоже, что уменьшенный файл содержит все необходимые файлы, а jquery-jvectormap.js — нет. Поэтому, если вы хотите использовать неминифицированную версию, вы должны быть готовы вручную загрузить все различные файлы, необходимые для jquery-jvectormap.js, например, map.js, vector-canvas.js и т. д. Их можно найти в каталоге /src, если вы получаете файлы с веб-сайта jvector maps.

person Lym    schedule 17.09.2016

arrow_upward
0
arrow_downward

Объявления переменных 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));
person Mads Hansen    schedule 15.01.2013
comment
Спасибо за предложение, я внес изменения, но это не помогло с ошибкой! - person rdmirza; 19.01.2013
comment
также проверьте правильность путей к файлам ресурсов и их успешную загрузку. - person Mads Hansen; 19.01.2013

arrow_upward
0
arrow_downward

Если вы все еще хотите сохранить правильные файлы локально, например, если вы используете Bower, вы можете использовать эту " встроенная версия jvectormap также на GitHub.

person Will Sewell    schedule 27.12.2014

arrow_upward
0
arrow_downward

Если вы загрузили ZIP-файл или клонировали его с GitHub: перейдите в каталог, в который вы загрузили, и запустите файл build.sh. Это создаст мини-файл для использования со всеми необходимыми зависимостями.

На Mac: source build.sh

Или вы можете просто использовать npm. Установите зависимость: npm install jvectormap --save, а затем используйте уменьшенный файл в себе node_modules.

person Jeremy    schedule 22.05.2018

arrow_upward
-2
arrow_downward

Не много о jVectorMap, но простое наблюдение.

В вашем коде переменная jvm нигде не определена. Не было бы хорошей идеей проверить файлы JS, используемые в коде, и обратить внимание на любую инициализацию переменной «jvm»?

person Riju Mahna    schedule 14.01.2013