управление карта с помощью кнопки галочки

Question

Я все еще пытаюсь сделать это случилось:

http://jsfiddle.net/Vh79z/10/

Как вы можете See- есть карта и коробка галочки. Я хочу, чтобы поле галочки контролировало цвет стран.

Например: при проверке (проверяется на загрузке) Я хочу выделить некоторые страны на карте. И когда они не отображаются, чтобы отобразить их в другом цвете.

  new jvm.WorldMap({ 
     map: 'world_mill_en', 
     container: $('#mymap'), 
     backgroundColor: '#314F73', 
     zoomMax: 40, 
     markers: markers, 
     markerStyle: { 
      initial: { 
       fill: '#ffffff' 
      } 
     }, 
     series: { 
      regions: [{ 
       scale: { 
        '1': '#B1C9C0', 
         '2': '#41a62a' 
       }, 
       attribute: 'fill', 
       values: data1['countriesvisited'] 
      }] 
     } 
    }); 
}); 
$(document).ready(function() { 
    $('#myForm').fancyfields(); 
    var mapObject = $('#mymap').jvm.WorldMap('get', 'mapObject'); 
    $("#Checkbox1").fancyfields("bind", "onCheckboxChange", function (input, isChecked) { 
     if (isChecked) { 
      console.log(mapObject.series.regions[0]); 
      mapObject.series.regions[0].setScale({ 
       '1': '#ffffff', 
        '2': '#000000' 
      }); 
     } else { 
      mapObject.series.regions[0].setScale({ 
       '1': '#000000', 
        '2': '#ffffff' 
      }); 
     } 
    }); 
}); 

Таким образом, используя приведенный выше код:

При загрузке он будет загружен со всеми: «1» стран параметров с цветом # B1C9C0 «2» странами параметров с цветом # 41A62A

на флажке : '1' страны параметров с цветом #ffffff '2' стран параметров с цветом # 000000

на снимите флажок: '1' страны параметров с цветом # 000000 '2' страны параметров с цветом #FFFFFF

Ну, это то, что я хочу. Я не уверен, что правильно получаю информацию с карты.

, пожалуйста, помогите!

Answer 1

EDIT 2

Ok я исправил проблему. Вот обновление jsFiddle: http://jsfiddle.net/Vh79z/16/

Проблема заключалась в том, что метод setScale не был добавлен в объект OrdinalScale. Это вызвало ошибку, возникающую при попытке установить масштаб в объекте region.

Это ошибка, поэтому я просто добавил метод setScale. Это выглядит следующим образом:

jvm.OrdinalScale.prototype.setScale = function(scale) { 
    this.scale = scale; 
}; 

EDIT 1

Вот обновленная скрипка на основе вашего обновленного кода: http://jsfiddle.net/Vh79z/13/

Если снять флажок кода, а затем страна превратить черно-белой. Если вы проверите его, цвета будут отменены. По крайней мере, это то, что я думаю, что ты ищешь.

Это в основном то же решение, что и для предыдущего вопроса. Смотрите скрипку: http://jsfiddle.net/YBGm4/9/

Я изменил это:

scale: { 
    '1': '#B1C9C0', 
    '2': '#41a62a' 
}, 

Для этого:

scale: ['#B1C9C0', '#41a62a'], 

Причина, почему я сделал это изменение, потому что они создают различные типы масштаба. Один с массивом - это объект jvm.ColorScale, который, как я думаю, вы ищете. Синтаксис объекта создает объект jvm.OrdinalScale.

Также был синтаксис ошибкой здесь:

$('#mymap').jvm.WorldMap('get', 'mapObject'); 

Должен быть:

$('#mymap').vectorMap('get', 'mapObject'); 

Также я изменил следующее (по какой-то причине он не понравился порядковый синтаксис масштаба):

if (isChecked) { 
     console.log(mapObject.series.regions[0]); 
     mapObject.series.regions[0].setScale({ 
      '1': '#ffffff', 
       '2': '#000000' 
     }); 
    } else { 
     mapObject.series.regions[0].setScale({ 
      '1': '#000000', 
       '2': '#ffffff' 
     }); 
    } 

Для этого:

if (isChecked) { 
    mapObject.series.regions[0].setScale(['#ffffff', '#000000']);       
} else {   
    mapObject.series.regions[0].setScale(['#00000', '#ffffff']);    
}