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 Documentation

$('#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())
        );
      }
    },

希望它可以帮到你

一次只能选择一个区域

2 个答案: