Показать сообщение отдельно
  #1 (permalink)  
Старый 21.09.2016, 11:19
Интересующийся
Отправить личное сообщение для maks777 Посмотреть профиль Найти все сообщения от maks777
 
Регистрация: 09.06.2016
Сообщений: 29

Как сделать изменения цветом на карте в зависимости от значения таблицы с БД?
<html >
  <head>
    <title>JQVMap - Russia Map</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="jqvmap/css/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jqvmap/js/jquery.vmap.js" type="text/javascript"></script>
    <script src="jqvmap/js/maps/jquery.vmap.russia.js" type="text/javascript"></script>
    
    
    <script type="text/javascript">
    // Массив всех объектов 
    var data_obj = {
        'no': ['Объект 1', 'Объект 2'],
        'kr': ['Объект 3', 'Объект 4', 'Объект 5'],
        'ir': ['Объект 6', 'Объект 7', 'Объект 8']
    };
    
    colorRegion = '#1076C8'; // Цвет всех регионов
    focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка
    selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов
    
    highlighted_states = {};
    
    // Массив подсвечиваемых регионов, указанных в массиве data_obj
    for(iso in data_obj){
        highlighted_states[iso] = selectRegion;
    }
    
    $(document).ready(function() {
        $('#vmap').vectorMap({
            map: 'russia',
            backgroundColor: '#ffffff',
            borderColor: '#ffffff',
            borderWidth: 2,
            color: colorRegion,
            colors: highlighted_states,         
            hoverOpacity: 0.7,          
            enableZoom: true,
            showTooltip: true,          
            
            // Отображаем объекты если они есть
            onLabelShow: function(event, label, code){
                name = '<strong>'+label.text()+'</strong><br>';             
                if(data_obj[code]){
                    list_obj = '<ul>';
                    for(ob in data_obj[code]){                  
                        list_obj += '<li>'+data_obj[code][ob]+'</li>';
                    }
                    list_obj += '</ul>';
                }else{
                    list_obj = '';
                }               
                label.html(name + list_obj);                
                list_obj = '';              
            },          
                        
        });     
        
    });
    // Выводим список объектов из массива
    $(document).ready(function() {
        for(region in data_obj){
            for(obj in data_obj[region]){
                $('.list-object').append('<li><a href="'+selectRegion+'" id="'+region+'" class="focus-region">'+data_obj[region][obj]+' ('+region+')</a></li>');
            }
        }
    });
    
    // Подсветка регионов при наведении на объекты
    $(function(){
        $('.focus-region').mouseover(function(){            
            iso = $(this).prop('id');
            fregion = {};
            fregion[iso] = focusRegion;
            $('#vmap').vectorMap('set', 'colors', fregion);         
        });
        $('.focus-region').mouseout(function(){
            c = $(this).attr('href');           
            cl = (c === '#')?colorRegion:c;
            iso = $(this).prop('id');
            fregion = {};
            fregion[iso] = cl;
            $('#vmap').vectorMap('set', 'colors', fregion);
        });
    }); 
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 800px; height: 500px;"></div>
        
  </body>
</html>
Ответить с цитированием