一次只选择一个区域

Question

我正在使用jVectorMap显示交互式地图。目前我可以同时选择多个区域，但我的要求是一次只能选择一个区域。这是如何做到的呢？

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    },
});

<div id="world-map" style="width:750px; height:380px; float:left;"></div>

Answer 1

除了regionsSelectable属性之外，还有一个regionsSelectableOne属性可以与它一起使用。

将regionsSelectable设置为true允许您选择区域，而将regionsSelectableOne设置为true只允许一次选择一个区域。

jVectorMap文档

$('#world-map').vectorMap({
    backgroundColor: '#0099FF',
    /* Hover color for each state */
    hoverColor: '#FCEF06',
    hover: {
        stroke: 'black',
        "stroke-width": 2,
        fill:'#FCEF06'
    },
    onRegionClick: function(event, code)
    {
        alert(code);
    },
    regionsSelectable: true,
    regionsSelectableOne: true, //add this line here
    regionStyle: {
        fill:'black',
        selected: {
            fill: 'red'
        }
    } 
});

Answer 2

请参阅本教程示例

http://jvectormap.com/examples/regions-selection/

你应该看看

regionStyle: {
      initial: {
        fill: '#B8E186'
      },
      selected: {   // here
        fill: '#F4A582'
      }
    },

onRegionSelected: function(){
      if (window.localStorage) {
        window.localStorage.setItem(
          'jvectormap-selected-regions',
          JSON.stringify(map.getSelectedRegions())
        );
      }
    },

希望它对你有帮助