美国地图 Raphel 插件自动更新和动态填充颜色

Question

我正在使用美国地图来明智地显示数据状态，Extension

地图工作正常在悬停时我成功地为每个州提供了价值。但是使用循环。

 "mouseover" : function(event, data) {    
                     $.each(__obj, function(key, value){
                       if(data.name === value.state_name){
                         var count = data.name +" : "+value.cnt;
                         $("#state_tooltip_map").show();
                         $("#state_tooltip_map").html(count);
                      }
                    });
                   },

代码工作正常，我想要的状态颜色也是如此：意味着最高值状态颜色较深，最低值状态颜色较浅 color.But 我在这里做不到：

"stateSpecificStyles": {
                         "VA": {fill: "teal"}
                      } ,

另一个问题是我想在不刷新页面的情况下点击提交更新整个地图，我试过了但它总是给我相同的值没有更新。

JS :

'var jsArray = '.json_encode($data_map_range).'; 
       var __obj =  jsArray; 
       var post_count = [];
       $.each(__obj, function(key, value){
            post_count.push(value.cnt);
         });
         alert(post_count.sort(function(a, b){return a-b}));
       var stateColor = $("h2").css("color");
                    $("#map-range").usmap({
                     "showLabels": true,
                      "stateHoverStyles": {
                         fill: stateColor
                     },
                     "labelBackingHoverStyles": {
                         fill: stateColor,
                         "stroke": stateColor
                     },
                      "stateSpecificStyles": {
                         "VA": {fill: "teal"}
                      } ,

                    "click" : function(event, data) {
                     var selected_state_obj              = $("#" + data.name);
                     var selected_label_obj              = $("#label_" + data.name);


                     if(selected_state_obj.attr("rel") == "enabled")
                     {
                         selected_state_obj.css("fill", "#A0A0A0");
                         selected_label_obj.css("fill", "#A0A0A0");
                         selected_state_obj.attr("rel", "disabled");
                         var index = myArray.indexOf(data.name);
                         if (index > -1) {
                             myArray.splice(index, 1);
                         }            
                     }
                     else
                     {
                         selected_state_obj.attr("rel", "enabled");
                         selected_state_obj.css("fill", stateColor);
                         selected_label_obj.css("fill", stateColor);
                         myArray.push(data.name);
                          $(selected_state_obj).attr("stateStyles","stroke: #000");
                      }
                   },
                   "mouseover" : function(event, data) {    
                     $.each(__obj, function(key, value){
                       if(data.name === value.state_name){
                         var count = data.name +" : "+value.cnt;
                         $("#state_tooltip_map").show();
                         $("#state_tooltip_map").html(count);
                      }
                    });
                   },
                   "mouseout" : function(event, data) {
                     $("#state_tooltip_map").hide();
                     $("#state_tooltip_map").html("");
                   },
                    });

                    $("#mapparentrange").mousemove(function(e){
                      $("#state_tooltip_map").css({
                         left:  (parseInt(e.pageX)-$("#location_search1").offset().left + 15),
                         top:   (parseInt(e.pageY)-$("#location_search1").offset().top + 15)
                      });
                   });'

HTML

<div style="z-index:9999; position:absolute; color:#000000; background:#FFFFFF; font-weight:bold; padding:2px; display:none; -webkit-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);-moz-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);
                                 box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);" id="state_tooltip_map"></div>
                            <div id="mapparentrange">                 
                                <div id="map-range" style="width:100%; height: 240px;display: block">
                                            </div>
                            </div>

Answer 1

如果您的地图是 SVG，您可以使用 css 更改状态颜色。例如每个状态（路径）都有自己的 class 或 id，然后你可以改变它的颜色，例如 VA 有一个 class 的 .id_va，这里可以是你的 css（这里我用的是这里的地图）：

path:hover{
fill:orange;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#656565"
  width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M512,224H122.562L301.281,45.281L256,0L0,256l256,256l45.281-45.281L122.562,288H512V224z"/>
</svg>

您可以使用 class 或 id 而不是 path 并更改填充颜色，甚至您还可以通过点击和更多选项轻松完成 JQuery (working with svg and JQuery)

美国地图 Raphel 插件自动更新和动态填充颜色

usa map Raphel plugin auto update and dynamic Fill color

html

javascript

php

jquery

jquery-plugins