Javascript Girl
  1. Javascript Girl
  3. Utilisation de régions personnalisées avec JQVmap
Intereting Posts
Comment puis-je empêcher la sauvegarde de la touche arrière? JS Google Maps API v3 Animate Marker entre les coordonnées Javascript: réinitialisation du formulaire réel pour les champs cachés Parsing address_components dans Google Maps après sélection automatique Gestion des exceptions asynchrones Javascript avec node.js Comment initialiser l'événement du clavier avec un char / keycode donné dans une extension Chrome? JavaScript – référençant 'this' dans une fonction interne Pourquoi scrollWidth ne fonctionne pas dans ce cas-ci dans Firefox? AddClass s'ajoute chaque fois dans chaque Clone JavaScript – Texte visible d'un DIV Echo PHP variable à partir de JavaScript? Comment exécutez-vous un script Python côté serveur en utilisant jQuery? L'objet Node.js n'est pas une fonction – module.exports Le graphe facebook indique que l'utilisateur aime l'url CreateJS / Adobe Animate CC: test d'une fonction simple

Utilisation de régions personnalisées avec JQVmap

J'utilise JQVmap ( https://github.com/manifestinteractive/jqvmap ) pour afficher une carte sur un site. Au lieu de faire quelque chose lorsque vous dirigez chaque pays, je veux qu'ils soient regroupés en régions. Par exemple, au lieu du Canada, des États-Unis et du Mexique, j'aimerais que les trois montrent l'état de survoltage lorsque vous passez sur l'un d'entre eux et que vous faites un regroupement de pays. J'ai vu de multiples publications sur la façon de colorier les ensembles de pays, mais chaque pays a toujours son propre statut de vol stationnaire et ne déclenche pas l'état du vol stationnement des autres pays avec la même couleur. Des idées?

Je travaillais sur un projet et je devais le faire. Voici comment je l'ai fait.

  1. Définissez les régions souhaitées.
  2. Ajoutez des méthodes auxiliaires pour mettre en surbrillance les pays de tous les pays d'une région.
  3. Ajoutez ces méthodes auxiliaires comme les méthodes "onRegionOver" et "onRegionOut" de la carte.

Étape 1.

Voici comment j'ai défini les régions. 

var regionMap = { "southAmerica" :{ "countries" : ["ar", "bo", "br", "cl", "co", "ec", "fk", "gy", "gf", "pe", "py", "sr", "uy", "ve"], "name" : "South America" }, "northAmerica" :{ "countries" : ["ca", "gl", "us"], "name" : "Northern America" } }; //And so on...

J'ai également ajouté une carte et une méthode pour la recherche inverse. 

 var countryMap = { "ca":"northAmerica", "gl":"northAmerica", "us":"northAmerica", }; //And so on... function getRegion(cc) { var regionCode = countryMap[cc]; return regionMap[regionCode]; }

Alternativement, vous pouvez éviter la carte de recherche inverse et écrire une fonction à la place: 

 function getCountriesInRegion(cc) { for (var regionKey in regions) { var countries = regionMap[regionKey].countries; for (var countryIndex in countries) { if (cc == countries[countryIndex]) { return countries; } } } }

Étape 2

Méthodes d'aide pour mettre en évidence / ne pas illuminer les régions: 

 function highlightRegionOfCountry (cc) { var countries = getRegion(cc).countries; for (countryIndex in countries) { $('#vmap').vectorMap('highlight',countries[countryIndex]); } $('#vmap').vectorMap('highlight',cc); } function unhighlightRegionOfCountry (cc) { var countries = getRegion(cc).countries; for (countryIndex in countries) { $('#vmap').vectorMap('unhighlight',countries[countryIndex]); } $('#vmap').vectorMap('unhighlight',cc); }

Étape 3.

Ajout d'enregistrement des méthodes d'aide aux événements de survol de la carte. 

 jQuery(document).ready(function() { jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: '#333333', color: '#ffffff', hoverOpacity: 0.2, selectedColor: '#666666', enableZoom: true, showTooltip: true, onRegionOver : function (element, code, region) { highlightRegionOfCountry(code); }, onRegionOut : function (element, code, region) { unhighlightRegionOfCountry(code); } }); });

Tl; dr: utilisez ces: 

 $('#vmap').vectorMap('highlight', countryCode);

et 

 $('#vmap').vectorMap('unhighlight', countryCode);

Les régions dont j'avais besoin pour mon projet étaient les régions définies par l'ONU. Vous pouvez jeter un oeil à ma fourchette de JVQmap sur GitHub . Le fichier que vous souhaitez regarder est /jqvmap/maps/jquery.vmap.un_regions.js .

J'espère que ça aide!