JVectorMap — выбор области с помощью кнопки

Я использую векторную карту J (http://jvectormap.com/documentation/javascript-api/) создать карту США.

Что я хочу сделать, так это иметь кнопку для каждого состояния, на которую вы можете нажать, и выбрать соответствующий регион на карте (или отменить выбор, если он уже был выбран). Я пытаюсь использовать для этого map.setSelectedRegion, но не могу заставить работать какой-либо код. В настоящее время попытка map.setSelectedRegion("US-CA") безрезультатна.

Любые идеи о том, что делать?

Спасибо!


jvectormap
person TonTon4Life    schedule 27.07.2013    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Кажется, много запросов на связывание ссылок с jvectormap.

Я собрал jsfiddle здесь: http://jsfiddle.net/3xZ28/117/

HTML

<ul id="countries">
  <li><a href="">Romania</a></li>
  <li><a href="">Australia</a></li>
</ul>
<div id="world-map" style="width: 600px; height: 400px"></div>

JS

var wrld = {
  map: 'world_mill_en',
  regionStyle: {
    hover: {
        "fill": 'red'
    }
  }
};

function findRegion(robj, rname) {
    var code = '';
    $.each(robj, function (key) {
        if ( unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname)) ) {
            code = key;
        };
    });
    return code;
};

$(document).ready(function () {
    $('#world-map').vectorMap(wrld);
    var mapObj = $('#world-map').vectorMap('get', 'mapObject');

    $('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
        // event.preventDefault();
        var elem = event.target,
            evtype = event.type,
            cntrycode = findRegion(mapObj.regions, $(elem).text());

        if (evtype === 'mouseover') {
            mapObj.regions[cntrycode].element.setHovered(true);
        } else {
            mapObj.regions[cntrycode].element.setHovered(false);
        };       
    });
});
person itmitica    schedule 24.09.2013

arrow_upward
3
arrow_downward

После того, как вы установили дескриптор

var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');

Просто используйте встроенную функцию setSelectedRegions (обратите внимание на "s"):

mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset

Если это все еще не работает, опубликуйте свой код, возможно, это что-то еще.

person siberius.k    schedule 28.07.2013

arrow_upward
0
arrow_downward

Этот код устарел, ниже приведена обновленная версия кода в соответствии с последним API jvectormap. Вот демонстрационный фрагмент:

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="jquery.vmap.min.js"></script>
  <script src="jquery.vmap.world.js"></script>

   <script>
        jQuery(document).ready(function () {
            $('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: '#2f95c9',
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: true,
                showTooltip: true,
                scaleColors: ['#C8EEFF', '#006491'],
                normalizeFunction: 'polynomial',
                regionsSelectableOne: false,
                regionsSelectable: false,
                series: {
                regions: [{
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial'
                }]
                }
            });

            var mapObj = $('#vmap').data('mapObject');

            $('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
                // event.preventDefault();
                var elem = event.target,
                    evtype = event.type;


                if (evtype === 'mouseover') {
                    mapObj.select($(elem).attr('id'));
                } else {
                    mapObj.deselect($(elem).attr('id'));
                };
            });
      });
    </script>

</head>
<body>
<ul id="countries">
  <li><a id="RO" href="">Romania</a></li>
  <li><a id="AU" href="">Australia</a></li>
</ul>
    <div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
person Rostyslav    schedule 09.06.2016