JVectorMap - 使用按钮选择区域

Question

我正在使用 J Vector Map ( http://jvectormap.com/documentation/javascript-api/ ) 创建美国 map 。

我想要做的是为每个州提供一个按钮，您可以单击该按钮并选择 map 中的相应区域(或取消选择，如果已选择)。我正在尝试使用 map.setSelectedRegion 来实现此目的，但我无法让任何代码正常工作。目前正在尝试map.setSelectedRegion("US-CA")但无济于事。

关于该做什么有什么想法吗？

谢谢!

Answer 1

似乎有很多使用 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);
        };       
    });
});