javascript - 美国 map 拉斐尔插件自动更新和动态填充颜色

Question

我正在使用美国 map 来显示数据状态，Extension

map 工作正常悬停时，我成功地为每个状态提供了值。但使用循环。

 "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);
                      }
                    });
                   },

代码工作正常，与我想要的状态颜色相同:意味着最高值状态有较深的颜色，最低值有浅色。但我无法在这里做到这一点:

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

另一个问题是我想在单击提交时更新整个 map 而不刷新页面，我尝试过，但它总是给我相同的值而没有更新。

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

如果您的 map 是 SVG，您可以使用 css 更改状态颜色。例如每个状态(路径)都有自己的类或id，那么你可以改变它的颜色，例如VA有一个类.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 )