Javascript 地理图表中未突出显示的区域

当从包含所有州的下拉列表中选择美国的一个州时，我希望在美国地图中突出显示该州。我想使用GoogleCharts API的地理图表来完成这项工作

为了实现这一点，我在中尝试了这个示例（您可以在其中编辑现有示例）

---

虽然阿拉斯加（“US-AK”）和夏威夷（“US-HI”）出现在地图上，但亚利桑那（“US-AZ”）没有。我怎样才能让亚利桑那州也突出显示？我也很欣赏任何关于我最初目标的指针，即当选择下拉列表中的某个状态时，动态高亮显示该状态

亚利桑那州没有出现在地图上的原因是您必须将

分辨率

选项设置为“省”才能获得州地图。使用下拉菜单突出显示选定状态稍微复杂一些，但肯定是可行的。这里有一种方法可以做到这一点；在javascript中：

function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['State', ''],
        ['US-AK', 0],
        ['US-AZ', 0],
        ['US-HI', 0]
    ]);

    var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    var options = {
        region:"US",
        legend:"none",
        width: 556,
        height: 347,
        resolution: 'provinces',
        colorAxis: {
            minValue: 0,
            maxValue: 1,
            colors: ['green', 'red']
        }
    };

    var stateSelector = document.querySelector('#state');    
    function updateChart () {
        var index = this.selectedIndex;
        var selectedState = this.options[index].value;

        var view = new google.visualization.DataView(data);
        view.setColumns([0, {
            type: 'number',
            calc: function (dt, row) {
                return (dt.getValue(row, 0) == selectedState) ? 1 : 0;
            }
        }]);

        geochart.draw(view, options);
    }

    if (document.addEventListener) {
        stateSelector.addEventListener('change', updateChart, false);
    }
    else if (document.attachEvent) {
        stateSelector.attachEvent('onchange', updateChart);
    }
    else {
        stateSelector.onchange = updateChart;
    }

    geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChart});

然后在HTML中：

<select id="state">
    <option value="" selected="selected">Select a state to highlight</option>
    <option value="US-AK">Alaska</option>
    <option value="US-AZ">Arizona</option>
    <option value="US-HI">Hawaii</option>
</select>
<div id="chart_div"></div>

选择要高亮显示的状态
阿拉斯加州
亚利桑那州
夏威夷

---

这里有一个jsfiddle，您可以使用它：

无需为我们或任何国家添加州代码。您可以按原样给出美国各州的全名，只需对代码进行一次修改。 只需像这样更改选项

 var options={
            region:"US",
            resolution: 'provinces',//This is the property due to which U can see regions.
            colors:['green', 'red'],
            dataMode:'regions'

    } 

---

美丽的！我喜欢用纯JS而不是jQuery编写。是否可以在没有任何数据的情况下开始，在开始时仅显示地图，然后在选择下拉选项时高亮显示状态？

 var options={
            region:"US",
            resolution: 'provinces',//This is the property due to which U can see regions.
            colors:['green', 'red'],
            dataMode:'regions'

    }