5

地域の選択について質問があります。のように別の方法で選択範囲を切り替える機能を作成しましたregionsSelectable()。を使用するregionsSelectable()と、複数のリージョンを選択できます。関数を使用して、選択したリージョンを現在選択しているリージョンに切り替えたいと考えています (毎回 1 つのリージョンのみが選択されます)。

これを実現するために、これらのすべての領域が選択解除された後にclearSelectedRegions()if関数を使用しました。length of SelectedRegions() > 1最新のリージョンを別の変数に保存しました。現在のリージョンを選択したリージョンとして表示するために、2 つの値を変更しました。

(container はマップ オブジェクト、GER は例の地域です)
第一に:container.regions.GER.element.isSelected = false;
第二に:container.regions.GER.element.setSelected(true);

しかし、これらは多くの地域を変更するための悪い方法です...

問題は、を使用して同じ値を変更するにはどうすればよいsetSelectedRegions()ですか?

4

5 に答える 5

4

この問題は、コマンドを使用して修正できますregionsSelectableOne: true。次のように、regionsSelectable と regionsSelectableOne の両方を true に設定する必要があります。

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

お役に立てれば。これは簡単な方法ですが、clearSelectedRegions() および setSelectedRegions() オプション/関数を使用してそれを行う方法を知りたいと思っています。ありがとう。

于 2012-11-08T23:53:36.757 に答える
3

これこそがやりたかったことではないですか？そのため、一度に選択できるリージョンは 1 つだけです。あなたが書いたすべてのコードで何を達成しようとしているのか、目的は正確にはわかりませんか? 私が以下に書いたコードは、と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>
于 2012-11-09T16:25:16.630 に答える
3

この問題を理解しようとする中で、私の最大の苦労は、jVectorMap が使用する 2 つのマップ作成コマンドの違いを理解しようとすることです。

新しいマップ コマンド

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

@マイクは正しいです。

使用する：

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

使用する場合

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

その後、setSelectedRegions() および onRegionSelected メソッドのループに陥る可能性があります。

お役に立てれば！

于 2014-07-31T16:25:00.700 に答える
0

ありがとう、私はこれらの関数が存在することを知りませんでした...そしてドキュメントで見つけることができません。(Version 1.1.1からの新たな修正ですか？)

clearSelectedRegions は SelectedRegions を stepp ごとに削除し、stepp ごとに関数の最初の行から開始するため、これら 2 つの関数を実現するために使用するのは少しトリッキーです。

選択したリージョンを保存するには、 of を使用したか、lengthof (container = map object)selectedRegionsを使用できます。さらに、基本値 isという名前の var を作成しました。長さが 0 の領域を選択していない場合、これは役に立ちます (理由は後で説明します)。lengthcontainer.getSelectedRegions()switch_landfalse

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

land_first は、選択した最初の土地を保存します。2 番目のステップでは、新しく選択したリージョンを見つけることが重要です。テストの結果、selectedRegions の 2 番目の値は、選択した 2 番目のリージョンであるとは限らないことがわかりました。

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

最後の 2 行は、最初に選択したリージョンを に保存しselectedRegion[0]ます。領域は常に選択領域配列の 2 番目の値に保存されるため、関数 pop() を使用して最新の選択領域を毎回保存できるため、これらは非常に優れています。


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

次のステップで region_delete を使用して、マニュエルの選択解除を停止しました。(リージョンを 1 回、2 回クリックすることができます。別のリージョンをクリックしている限り、そのリージョンは選択されたままです)

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

関数 selected_region については最後に説明します。最後に、最新の土地を選択する必要があります。そして、ユーザーが領域をクリックして領域の選択を解除する瞬間を見つけるために、lengthとともに 0を使用しました。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;
}
}

false を選択status_1 = falseしていない場合は、領域がマウス アウトされた後、土地がホバリングされ、選択した色が表示されることがわかります。

問題は、変数を使用して値を変更できないことですcontainer.regions.selectedRegions[0].element.setSelected(status_2);。これが主な問題であり、最初の質問を書いた理由です;)

于 2012-11-09T08:58:00.053 に答える