在地理海圖中未突出顯示的地區

當從包含所有州的下拉列表中選擇美國州時，我希望顯示在美國地圖中突出顯示的州。我想使用Google Charts API的地理圖表完成此操作。在地理海圖中未突出顯示的地區

雖然試圖做到這一點，我在Google Code Playground（在這裏您可以編輯現有的樣本）

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Country'], 
    ['US-AK' ], 
    ['US-AZ' ], 
    ['US-HI' ], 

    ]); 

    var geochart = new google.visualization.GeoChart(
     document.getElementById('visualization')); 
    geochart.draw(data, {region:"US",legend:"none",width: 556, height: 347}); 
}

試過這個樣本雖然阿拉斯加（ 'US-AK'）&夏威夷（ 'US-HI'）在地圖上顯示，亞利桑那州（'US-AZ'）沒有。我怎樣才能讓亞利桑那州被突出顯示呢？我也很欣賞任何關於我的原始目標的指針，顯示在選擇下拉菜單中的狀態時動態突出顯示的狀態。

來源

2013-10-11 mvp

亞利桑那州不顯示在地圖上的原因是因爲您必須將resolution選項設置爲「省份」以獲取州的地圖。使用下拉菜單突出顯示所選狀態會稍微複雜一些，但確實可行。這是你可以做到的一種方式;在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，你可以玩的：http://jsfiddle.net/asgallant/wwDyU/

來源

2013-10-11 14:13:13 asgallant

漂亮！我喜歡你用普通的JS而不是jQuery寫的。是否可以在沒有任何數據的情況下啓動，並在開始時只顯示地圖，然後在選擇下拉選項時突出顯示一個狀態？ – mvp

是的，你也可以這樣做：http://jsfiddle.net/asgallant/wwDyU/1/ – asgallant

無需添加國家代碼爲美國或任何國家。您可以按原樣提供美國各州的完整名稱，只需在代碼中進行一次修改即可。只需更改像這樣的選項....

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

    }

來源

2014-07-03 05:14:57 RohannG

在地理海圖中未突出顯示的地區

回答

相關問題