Question

我对区域选择有疑问。我创建了一个函数来以不同的方式切换选定的区域，如regionsSelectable()。通过使用regionsSelectable()我可以选择多个区域，使用我的功能我想将所选区域切换到当前所选区域（每次只选择一个区域）。

为了实现这一点，我在取消选择所有区域之后使用clearSelectedRegions()函数length of SelectedRegions() > 1。我已将最新区域保存在单独的变量中。为了将当前区域显示为选定区域，我更改了两个值。

（容器是地图对象，GER是示例区域）
首先：container.regions.GER.element.isSelected = false;
其次：container.regions.GER.element.setSelected(true);

但这些是改变很多地区的坏方法......

所以问题是，如何使用setSelectedRegions()更改相同的值？

Answer 1

在试图理解这个问题时，我最大的努力是试图理解jVectorMap使用的两个地图创建命令之间的差异：

新地图命令

new jvm.WorldMap({ container: $('.map') , .... });

或

$('#map').vectorMap({ .... });

根据您选择的命令，整个编码过程似乎采取不同的行动？例如，

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  <script>
    $(function(){
        var map = new jvm.WorldMap({
        container: $('.map'),
        map: 'world_mill_en',
        regionsSelectable: true,
                });

     $('.button-clear-selected-regions').click(function(){
       map.clearSelectedRegions();
     });
   });
  </script>
</head>
<body>
    <div class="map" style="width: 800px; height: 500px"></div>
    <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
</body>

两者都创建一个工作图，但clearSelectedRegions（）函数仅适用于上面的那个。

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>   
  <script>
    $(function(){
        var map = $('#map').vectorMap({
        container: $('.map'),
        map: 'world_mill_en',
        regionsSelectable: true,
                });

      $('.button-clear-selected-regions').click(function(){
        map.clearSelectedRegions();
      });
   });
  </script>
</head>
<body>
    <div id="map" style="width: 800px; height: 500px"></div>
    <input type="button" value="Clear selected regions" class="button-clear-selected-regions"/>
</body>

编辑 - 在做了一些研究之后，显然地图创建代码new jvm.WorldMap({ container: $('.map') , .... });使用JavaScript API（v 1.0），而$('#map').vectorMap({ .... });仅使用JavaScript API（v 0.2.3）。

仅使用v1.0

支持clearSelectedRegions()功能（以及许多其他功能）

Answer 2

这不就是你想做的吗？因此，任何时候都只能选择一个区域。我不确定你用你编写的所有代码实现了什么，目的是什么？我在下面编写的代码与regionsSelectableOne: true的工作方式完全相同，但使用clearSelectedRegions()和setSelectedRegions(code)来实现目标。

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  <script>
    $(function(){
        var map = new jvm.WorldMap({
        container: $('#map'),
        map: 'world_mill_en',
        onRegionClick: function(e, code) {
                       map.clearSelectedRegions();
                       map.setSelectedRegions(code);
                                         }
        });
    });
  </script>
</head>
<body>
       <div id="map" style="width: 800px; height: 500px"></div>
</body>

Answer 3

谢谢，我不知道这些功能存在......我在文档中找不到它。（这是1.1.1版的新修改吗？）

使用这两个函数实现这一点有点棘手，因为clearSelectedRegions通过stepp删除了SelectedRegions stepp，并从每个stepp的函数的第一行开始。

要保存选定的区域，我已使用length的{{1}}，或者您可以使用selectedRegions（容器=地图对象）length。此外，我创建了一个名为container.getSelectedRegions()的var，其基本值为switch_land。如果我们没有选择任何区域，长度为0，这是有帮助的（稍后我会告诉你原因）。

false
length = selectedRegions.length;
switch_land = false;
if (length === 1) {
land_first = selectedRegions[0];

land_first保存您选择的第一块土地。在第二步中，找到新选择的区域非常重要。通过测试，我发现selectedRegions的第二个值并非每次都是您选择的第二个区域。

}
if (length === 2) {
if (land_first !== selectedRegions[0]) {
selectedRegions[1] = selectedRegions[0];

最后两行将第一个选定的区域保存到selectedRegions[0] = land_first;。这些非常好，因为现在我们可以使用函数pop（）每次保存最新的选定区域，因为区域总是保存在所选区域数组的第二个值中。

selectedRegion[0]
}
region_delete = true;
regions = selectedRegions;
land_secound = regions.pop();
container.clearSelectedRegions();
switch_land = true;

我在下一个stepp中使用了region_delete来阻止manuel取消选择。（您可以在区域上单击一次，两次等，只要您单击另一个区域，该区域就会保持选择状态）

}
if (typeof region_delete === 'undefined'){
region_delete = false;
}
if (length === 0 && region_delete === false){
selected_region(land_first, false, true);

我将在最后描述函数selected_region。最后我们必须选择最新的土地。我已经使用} 0和length来查找用户点击某个区域以取消选择该区域的时刻。

region_delte
if (switch_land === true) {
selectedRegions[0] = land_secound;
selected_region(land_secound, false, true);
delete land_secound;
region_delete = false;

多数民众赞成。现在我将举例说明带有区域GER的selected_region。

}
function selected_region(selected_regions, status_1, status_2) {
switch (selected_regions) {
case "GER":
container.regions.GER.element.isSelected = status_1;
container.regions.GER.element.setSelected(status_2);
break;
}

对于区域切换，选择}非常重要，如果您没有选择假，您可以看到土地悬停，并且区域鼠标移出后将显示选择颜色。

问题是我不能使用var来改变像status_1 = false这样的值，这是主要问题，也是我写第一个问题的原因;）

Answer 4

@Mike是正确的。

使用：

map: 'world_mill_en',
  series: {............},
  regionsSelectable: true,
  regionsSelectableOne: true,

如果您使用

mapObj.clearSelectedRegions();
mapObj.setSelectedRegions(string);

然后你可能会发现自己处于setSelectedRegions（）和onRegionSelected方法的循环中。

希望这有帮助！

在clearSelectedRegions（）之后更改当前选定的区域

4 个答案: