Erreur jVectorMap: "jvm n'est pas défini"

J'essaie de recréer le jVectorMap exemple de visualisation du chômage américain. J'ai pris le code directement de Github . La carte ne se charge pas et la console me donne cette erreur: "jvm n'est pas défini".

Voici le code:

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

J'avais exactement le même problème. Le problème est le fichier ZIP que vous avez téléchargé qui vous redirige vers

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

C'est en fait un fichier JS qui invoque JVM, pas la bibliothèque JVM réelle (c'est pourquoi vous obtenez l'erreur "JVM is not defined".

La façon dont je l'ai réparé était de prendre le dossier

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

Et l'inclure dans mon projet.

C'est la bibliothèque ACTUAL JVM, dans la mesure où cela est inclus avant de faire appel à .vectorMap, ça va être génial pour vous.

Donc vous utilisez le fichier js non minif. Il contient uniquement le code principal sans bibliothèques.

Pour corriger cette erreur, vous disposez de 2 solutions:

  1. Ajoutez toutes les bibliothèques nécessaires. Vous pouvez le trouver dans lib/ directory. Exemple avec les fichiers et avec quel ordre vous devez ajouter votre recherche dans les tests/index.html fichier

  2. Créez des js minifiés. Vous devez utiliser le système NIX et exécuter ./build.sh . Peut-être devrez-vous installer uglifyjs utilitaire , par exemple, vous pouvez installer npm à partir d'ici , puis exécuter npm install uglify-js@1

Il apparaît que le fichier minifié contient tous les différents fichiers nécessaires alors que jquery-jvectormap.js ne le fait pas. Donc, si vous souhaitez utiliser la version non minifiée, vous devriez être prêt à charger manuellement tous les différents fichiers nécessaires par jquery-jvectormap.js par exemple map.js , vector-canvas.js , etc. Vous pouvez les trouver dans /src Si vous obtenez vos fichiers depuis le site de cartes jvector

Les déclarations variables statesValues , metroPopValues et metroUnempValues devraient être leur propre déclaration terminée par a ; . Vous finissez actuellement les lignes avec un,.

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

Si vous souhaitez toujours enregistrer les fichiers corrects localement, par exemple si vous utilisez Bower, vous pouvez utiliser cette version "construite" de jvectormap également sur GitHub.

Donno beaucoup sur jVectorMap mais une simple observation.

Dans votre code, la variable 'jvm' n'est nulle part définie. Ne serait-il pas judicieux de vérifier les fichiers JS utilisés dans le code et de rechercher toute initialisation de la variable 'jvm'?