使用自定义区域与JQVmap [英] Using custom regions with JQVmap

问题描述

我正在使用JQVmap（ https://github.com/manifestinteractive/jqvmap ）来输出在网站上映射我们希望将它们分组到各个地区，而不是在每个国家的情况下做某事。例如，而不是加拿大，美国&墨西哥，我希望所有三个人在悬停在任何一个国家和组成一个国家的时候显示悬停状态。我已经看到了多个国家的颜色集合的帖子，但是每个国家仍然有自己的悬停状态，并不会以相同的颜色触发其他国家的悬停状态。任何想法？

I am using JQVmap (https://github.com/manifestinteractive/jqvmap) to output a map on a site. Instead of doing something when you hover each country, I want them to be grouped into regions. For example, instead of Canada, US & Mexico, I would like all three to show the hover state when you hover over any of them and make a grouping of countries. I have seen multiple posts on how to color sets of countries, but each country still has its own hover state then and doesn't trigger the hover state of the other countries with the same color. Any ideas?

推荐答案

我正在开展一个项目，需要做到这一点。

I was working on a project and needed to do this. Here's how I did it.

1. 定义您想要的区域。


2. 添加帮助方法以突出显示/ unhighlight某个地区所有国家/地区的国家/地区。


3. 将这些帮助方法添加为地图的onRegionOver和onRegionOut方法。

步骤1。

这是我如何定义区域。

Step 1.

Here is how I defined regions.

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

我还添加了一个用于反向查找的地图和方法。

I also added a map and a method for for reverse lookup.

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

或者，您可以避免反向查找映射并写入一个函数： / p>

Alternatively, you can avoid the reverse lookup map and write a function instead:

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

步骤2

突出显示/不高亮区域的辅助方法：

Step 2

Helper methods for highlighting/unhighlighting regions:

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

步骤3。

添加注册助手方法到地图的悬停事件。

Step 3.

Adding registering the helper methods to the map's hover events.

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：使用这些：

tl;dr: Use these:

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

和

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

我的项目需要的地区是联合国定义的地区。您可以在 GitHub 上查看我的JVQmap分支。您要查看的文件是 / jqvmap / maps / jquery .vmap.un_regions.js 。

The regions I needed for my project were the regions defined by the UN. You can take a look at my fork of JVQmap on GitHub. The file you'll want to look at is /jqvmap/maps/jquery.vmap.un_regions.js.

希望这有帮助！

这篇关于使用自定义区域与JQVmap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！