一次只选择一个区域

Select only one region at a time

本文关键字：一个 区域 一次 选择      更新时间：2023-09-26

我正在使用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>

除了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'
        }
    } 
});

请参阅本教程示例

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

希望它能帮助你

相关文章：