一次只能選擇一個區域

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

看到希望它可以幫助你