Question

我想知道是否有人知道一个用于显示美国各州号码的开源项目。

具体来说，您总是会看到这些图片与加利福尼亚州的深灰色，蒙大拿州的绿色等等。基于某种标准。

我正在考虑为我维护的网站建一个，但我希望我不必重新发明轮子。

http://upload.wikimedia.org/wikipedia/commons/7/70/World_map_of_Energy_consumption_1979-1981.svg

如上所述，但对于美国，你可以定义自己的标准吗？

Answer 1

试试maps in the Google Charts API。您可以通过编程方式选择国家和颜色。

Answer 2

这是我在开源中可以找到的最好的。

我会选择这样的插件，只需将其更改为根据动态数据“突出显示”：

目前它突出了鼠标悬停，但突出显示使用的数据应该非常简单。

它带有美国地图并突出显示准备就绪的事实只是肉汁。

Answer 3

找到了解决此问题的更好方法。

http://en.wikipedia.org/wiki/File:Blank_US_Map.svg

简单SVG（xml文档）。只需根据需要遍历并更改填充/行程/任何值。您可能需要在完成后转换为栅格，以便IE（呻吟）工作，但它确实是一个非常简单易用的解决方案。

更新：这是一个示例javascript + jquery代码块，它将通过百分比参数更新状态。从白色到蓝色的过渡。

for(var i = 0; i < states.length; i++) {
        var state = states[i];
        var stateDom = $("#"+state.id);
        var domArray = [];
        //hack to support multiple path state of Michigan
        if(stateDom.is("path"))
            domArray.push(stateDom);
        else {
            var children = $("#"+state.id + " path");
            for(var k = 0; k < children.length; k++){
                domArray.push($(children[k]));
            }
        }
        for(var l = 0; l < domArray.length; l++) {
            var stateObj = domArray[l];
            //Onlick event for each state
//              var closed = function (percentage) {
//                  return function (){
//                      alert("P"+percentage);
//                  }
//              }(state.percentage);
//              stateObj.click(closed);
                var svgStyle = stateObj.attr("style");
                var stylesArray = svgStyle.split(";");
                svgStyle = "";
                for(var j = 0; j < stylesArray.length; j++) {
                    var styleObj = stylesArray[j].split(":");
                    if(styleObj[0] == "fill") {
                        var mask = 256 - Math.round((state.percentage)/100 * 256);
                        styleObj[1] = "rgb("+mask+","+mask+",256)";
                    }
                    svgStyle += styleObj[0]+":"+styleObj[1] +";";
                }
                stateObj.attr("style",svgStyle);
            }
        }

开源美国州的状态显示

3 个答案: