一次僅選擇一個區域

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

希望對您有幫助