5

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

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

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

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

所以问题是，我怎样才能通过使用来更改相同的值setSelectedRegions()？

4

5 回答 5

4

可以使用regionsSelectableOne: true命令修复此问题。regionSelectable 和 regionSelectableOne 都需要设置为 true，如下所示：

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

希望这可以帮助。尽管这是一种简单的方法，但我本人很想知道如何使用 clearSelectedRegions() 和 setSelectedRegions() 选项/函数来完成它。谢谢。

于 2012-11-08T23:53:36.757 回答
3

这不正是你想做的吗？这样任何时候都只能选择一个区域。我不确定你用你写的所有代码想要达到什么目的，目的是什么？我在下面编写的代码的工作方式与 dos 完全相同，regionsSelectableOne: true但使用clearSelectedRegions()andsetSelectedRegions(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>
于 2012-11-09T16:25:16.630 回答
3

在试图理解这个问题时，我最大的困难是试图理解 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)。

clearSelectedRegions()仅使用 v1.0 支持该功能（和许多其他功能）

于 2012-11-09T13:34:16.217 回答
0

@Mike 是正确的。

利用：

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

如果你使用

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

然后您可能会发现自己处于 setSelectedRegions() 和 onRegionSelected 方法的循环中。

希望这可以帮助！

于 2014-07-31T16:25:00.700 回答
0

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

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

为了保存选定的区域，我使用了lengthofselectedRegions或者您可以使用lengthof (container = map object) container.getSelectedRegions()。此外，我创建了一个名为switch_land它们的基本值的变量是false. 如果我们没有选择长度为 0 的区域，这很有帮助（稍后我会告诉你原因）。

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;

最后两行将第一个选定的区域保存到selectedRegion[0]. 这些非常好，因为现在我们可以使用函数 pop() 每次保存最新的选定区域，因为该区域始终保存在选定区域数组的第二个值中。


}
region_delete = true;
regions = selectedRegions;
land_secound = regions.pop();
container.clearSelectedRegions();
switch_land = true;
}

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

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

我将在最后描述函数 selected_region。最后，我们必须选择最新的土地。我已经使用length0region_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;
}
}

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

问题是我不能使用 var 来更改类似的值container.regions.selectedRegions[0].element.setSelected(status_2);，这是主要问题，也是我写第一个问题的原因；）

于 2012-11-09T08:58:00.053 回答