Question

我正在构建一个具有多个点选择行为的地图。目前我设法与单一国家选择合作这是点击事件：

以下是点击事件：

point: {
            events:{
                click: function(e){
                    //Reset dropdowns
                    $('.popup select').prop('selectedIndex',0);

                    //Reset popup info
                    $('.popup .text').html('');

                    //store path access string
                    var thisPath = 'svg path.highcharts-key-'+e.currentTarget.code.toLowerCase();

                    //Change color of selected path
                    $(thisPath).css({fill:'rgb(20,200,0)'});

                    //Add a data attr to popup div
                    $('.popup').attr('data-country-class', 'highcharts-key-'+e.currentTarget.code.toLowerCase());

                    //Update popup INFO
                    $('.popup .market .text')   .html(e.currentTarget.name);
                    $('.popup .region .text')   .html(e.currentTarget.region);
                    $('.popup .sz .text')       .html(e.currentTarget.stabZone);

                    //Listen to market dropdown change
                    $('.popup .market select').change(function  (e) {

                        //Currently selected country class
                        var countryClass = $(this).parents('.popup').attr('data-country-class');

                        if(this.value === 'exclude'){
                            $('svg path.'+countryClass).css({fill: 'rgb(200,20,0)'});
                        }
                        if(this.value === 'include'){
                            $('svg path.'+countryClass).css({fill: 'rgb(20,200,0)'});
                        }
                        if(this.value === 'remove'){
                            $('svg path.'+countryClass).css({fill: 'rgb(208, 220, 230)'});
                        }
                    });


                    $('.popup').hide().fadeIn(500).css({left:e.pageX+30, top: e.pageY-90});
                }
            }
        }

这是弹出式标记

<div class="popup">
    <p class="market">
        <span><strong class="text"></strong></span>
         <select name="market-include" id="market-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
             <option value="remove">Remove</option>
        </select>
    </p>
    <p class="region">
        <span><strong class="text"></strong></span>
        <select name="region-include" id="region-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
            <option value="remove">Remove</option>
        </select>
    </p>
    <p class="sz">
        <span>Stability Zone <strong class="text"></strong></span>
        <select name="sz-include" id="sz-include">
            <option value="include">Include</option>
            <option value="exclude">Exclude</option>
            <option value="remove">Remove</option>
        </select>
    </p>
</div>

当区域获得值包括时，我需要一次选择多个国家/地区。

这是国家json定义的一个例子

{  
  "code":"US",
  "value":34,
  "name":"United States",
  "region": "AMER",
  "stabZone": "1a"
}

我一直在寻找一种方法来为每条路径添加一个地区类，但我找不到办法。

目前每个路径都有一个类。例如。美国路径有以下类=＆＃34; highcharts-name-united-States-america-state-highcharts-key-us＆＃34;

我想找到一种方法来添加一个地区类，例如highcharts区域-AMER

有人可以帮我这么做吗？。

我真的很感激！

将自定义类Highmaps到路径点

0 个答案: