2013-07-11 14 views
0

我正在使用Google Geochart API來實施印度政治地圖的智慧型報​​告。我使用了下面的代碼:Google Geochart:針對有爭議的地區的顏色代碼不正確

google.load('visualization', '1', {'packages': ['geochart']}); 
google.setOnLoadCallback(drawVisualization); 

function drawVisualization() { 

var data = new google.visualization.DataTable(); 

data.addColumn('string', 'Country'); 
data.addColumn('number', 'Value'); 
data.addColumn({type:'string', role:'tooltip'}); 
var ivalue = new Array(); 

data.addRows([[{v:'IN-AP',f:'Andhra Pradesh'}, 5,'5']]); 
ivalue['IN-AP'] = 'http://en.wikipedia.org/wiki/Andhra_Pradesh'; 

data.addRows([[{v:'IN-AR',f:'Arunachal Pradesh'},4,'4']]); 
ivalue['IN-AR'] = 'http://en.wikipedia.org/wiki/Arunachal_Pradesh'; 

data.addRows([[{v:'IN-AS',f:'Assam'},2,'2']]); 
ivalue['IN-AS'] = 'http://en.wikipedia.org/wiki/Assam'; 

data.addRows([[{v:'IN-BR',f:'Bihar'},3,'3']]); 
ivalue['IN-BR'] = 'http://en.wikipedia.org/wiki/Bihar'; 

data.addRows([[{v:'IN-CT',f:'Chhattisgarh'},4,'4']]); 
ivalue['IN-CT'] = 'http://en.wikipedia.org/wiki/Chhattisgarh'; 

data.addRows([[{v:'IN-GA',f:'Goa'},5,'5']]); 
ivalue['IN-GA'] = 'http://en.wikipedia.org/wiki/Goa'; 

data.addRows([[{v:'IN-GJ',f:'Gujarat'},6,'6']]); 
ivalue['IN-GJ'] = 'http://en.wikipedia.org/wiki/Gujarat'; 

data.addRows([[{v:'IN-HR',f:'Haryana'},7,'7']]); 
ivalue['IN-HR'] = 'http://en.wikipedia.org/wiki/Haryana'; 

data.addRows([[{v:'IN-HP',f:'Himachal Pradesh'},7,'3']]); 
ivalue['IN-HP'] = 'http://en.wikipedia.org/wiki/Himachal_Pradesh'; 

data.addRows([[{v:'IN-JK',f:'Jammu and Kashmir'},3,'3']]); 
ivalue['IN-JK'] = 'http://en.wikipedia.org/wiki/Jammu_and_Kashmir'; 

data.addRows([[{v:'IN-JH',f:'Jharkhand'},4,'4']]); 
ivalue['IN-JH'] = 'http://en.wikipedia.org/wiki/Jharkhand'; 

data.addRows([[{v:'IN-KA',f:'Karnataka'},8,'8']]); 
ivalue['IN-KA'] = 'http://en.wikipedia.org/wiki/Karnataka'; 

data.addRows([[{v:'IN-KL',f:'Kerala'},7,'7']]); 
ivalue['IN-KL'] = 'http://en.wikipedia.org/wiki/Kerala'; 

data.addRows([[{v:'IN-MP',f:'Madhya Pradesh'},8,'8']]); 
ivalue['IN-MP'] = 'http://en.wikipedia.org/wiki/Madhya_Pradesh'; 

data.addRows([[{v:'IN-MH',f:'Maharashtra'},9,'9']]); 
ivalue['IN-MH'] = 'http://en.wikipedia.org/wiki/Maharashtra'; 

data.addRows([[{v:'IN-MN',f:'Manipur'},7,'7']]); 
ivalue['IN-MN'] = 'http://en.wikipedia.org/wiki/Manipur'; 

data.addRows([[{v:'IN-ML',f:'Meghalaya'},4,'4']]); 
ivalue['IN-ML'] = 'http://en.wikipedia.org/wiki/Meghalaya'; 

data.addRows([[{v:'IN-MZ',f:'Mizoram'},3,'3']]); 
ivalue['IN-MZ'] = 'http://en.wikipedia.org/wiki/Mizoram'; 

data.addRows([[{v:'IN-NL',f:'Nagaland'},2,'2']]); 
ivalue['IN-NL'] = 'http://en.wikipedia.org/wiki/Nagaland'; 

data.addRows([[{v:'IN-OR',f:'Orissa'},4,'4']]); 
ivalue['IN-OR'] = 'http://en.wikipedia.org/wiki/Orissa'; 

data.addRows([[{v:'IN-PB',f:'Punjab'},5,'5']]); 
ivalue['IN-PB'] = 'http://en.wikipedia.org/wiki/Punjab'; 

data.addRows([[{v:'IN-RJ',f:'Rajasthan'},7,'7']]); 
ivalue['IN-RJ'] = 'http://en.wikipedia.org/wiki/Rajasthan'; 

data.addRows([[{v:'IN-SK',f:'Sikkim'},4,'4']]); 
ivalue['IN-SK'] = 'http://en.wikipedia.org/wiki/Sikkim'; 

data.addRows([[{v:'IN-TN',f:'Tamil Nadu'},8,'8']]); 
ivalue['IN-TN'] = 'http://en.wikipedia.org/wiki/Tamil_Nadu'; 

data.addRows([[{v:'IN-TR',f:'Tripura'},3,'3']]); 
ivalue['IN-TR'] = 'http://en.wikipedia.org/wiki/Tripura'; 

data.addRows([[{v:'IN-UT',f:'Uttarakhand'},4,'4']]); 
ivalue['IN-UT'] = 'http://en.wikipedia.org/wiki/Uttarakhand'; 

data.addRows([[{v:'IN-UP',f:'Uttar Pradesh'},8,'8']]); 
ivalue['IN-UP'] = 'http://en.wikipedia.org/wiki/Uttar_Pradesh'; 

data.addRows([[{v:'IN-WB',f:'West Bengal'},7,'7']]); 
ivalue['IN-WB'] = 'http://en.wikipedia.org/wiki/West_Bengal'; 

data.addRows([[{v:'IN-AN',f:'Andaman and Nicobar Islands'},2,'2']]); 
ivalue['IN-AN'] = 'http://en.wikipedia.org/wiki/Andaman_and_Nicobar_Islands'; 

data.addRows([[{v:'IN-CH',f:'Chandigarh'},6,'6']]); 
ivalue['IN-CH'] = 'http://en.wikipedia.org/wiki/Chandigarh'; 

data.addRows([[{v:'IN-DN',f:'Dadra and Nagar Haveli'},4,'4']]); 
ivalue['IN-DN'] = 'http://en.wikipedia.org/wiki/Dadra_and_Nagar_Haveli'; 

data.addRows([[{v:'IN-DD',f:'Daman and Diu'},2,'2']]); 
ivalue['IN-DD'] = 'http://en.wikipedia.org/wiki/Daman_and_Diu'; 

data.addRows([[{v:'IN-DL',f:'Delhi'},10,'10']]); 
ivalue['IN-DL'] = 'http://en.wikipedia.org/wiki/Delhi'; 

data.addRows([[{v:'IN-LD',f:'Lakshadweep'},1,'1']]); 
ivalue['IN-LD'] = 'http://en.wikipedia.org/wiki/Lakshadweep'; 

data.addRows([[{v:'IN-PY',f:'Puducherry (Pondicherry)'},6,'6']]); 
ivalue['IN-PY'] = 'http://en.wikipedia.org/wiki/Puducherry'; 

var options = { 
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, 
colorAxis: {colors: ['yellow','orange', 'red']}, 
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, 
datalessRegionColor: '#FFFFFF', 
displayMode: 'regions', 
enableRegionInteractivity: 'true', 
resolution: 'provinces', 
sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, 
region:'IN', 
keepAspectRatio: true, 
width:800, 
height:500, 
tooltip: {textStyle: {color: '#444444'}, trigger:'focus'} 
}; 

var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
google.visualization.events.addListener(chart, 'select', function() { 
var selection = chart.getSelection(); 
if (selection.length == 1) { 
var selectedRow = selection[0].row; 
var selectedRegion = data.getValue(selectedRow, 0); 
if(ivalue[selectedRegion] != '') { window.open(ivalue[selectedRegion]); } 
} 
}); 
chart.draw(data, options); 
} 

在這裏,最頂級的狀態即。查謨和克什米爾有爭議。有什麼方法可以實施以下任何一種:
1.我可以移除有爭議的區域並以適當的顏色顯示整個狀態。
2.或任何如何顯示爭議狀態的有爭議和無爭議的區域相同的顏色。

我們還可以在「解決方案:'省份'」的選項中有更多的「區域」嗎?

請幫忙!!

回答

0

不是一個完整的答案,我承認我不知道太多關於google.maps這方面,但它說here說:

Maps API中地圖類型的內部工作是一種先進的 的話題。大多數開發人員可以簡單地使用下面指出的基本地圖類型 。但是,您也可以使用自定義的 地圖類型定義自己的地圖圖塊,或使用 樣式化地圖修改現有地圖類型的顯示。當提供自定義地圖類型時,您將需要 瞭解如何修改地圖的地圖類型註冊表。

經過一番努力,這應該提供一種機制,通過該機制,您可以爲有爭議的地區提供您自己的重新着色的地圖圖塊。

0

該地圖的底層SVG顯示該地區有爭議,並且缺少編輯SVG本身的功能,因此無法更改它們。下面是有關線查漠和克什米爾巴基斯坦:

<path d="M309.80792933629334,18.989110296063618L312.62808795206297,22.726320565659634L318.8362126083018,25.16463114909045L322.88492641920095,24.446213181078875L321.8625826161618,21.835482285325142L316.19903029818965,21.424547207622577L313.5211865868203,19.382803342533922L312.8444646944677,15.12689530003403L305.6009264990715,11.194275343138958L300.6533052818071,6.069081559344707L302.39738895716204,12.655537490074323L300.87113421711376,15.882671002382095L302.96229199605716,16.411426626838498L303.9512353623492,19.871327560781815L309.88634775300363,18.911521155518564Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)"> 
<path d="M352.86980546060823,44.62370023065002L352.8785186180206,43.459863122471255L356.59758464015573,43.43831058343074L357.38612538596567,40.084735508753326L360.68986423811594,39.4554013687749L363.73656494660463,28.12020266948963L365.6955731714622,26.554051499224865L364.9070324256523,25.10715771164957L362.56754966045906,24.223503610995472L360.38199934288275,26.901765795742225L359.568771317738,23.74216357242775L355.29061102831594,23.094150565281495L353.37081201181365,18.535070140280627L352.16258751731283,19.37418...61059265807575,30.294135440692685L333.46705609639645,34.82016863916499L334.505374021358,40.82757968767728L345.62626726521205,45.57488562029698L343.98383709300026,49.103754679169384L340.0876035368157,50.47449616213537L342.8090130352466,61.802510681740465L344.1900484850904,62.31258743902904L343.71808579192606,58.345483419669286L346.3828597671772,58.19461564638694L343.6483805326281,51.75471698113179L350.9195103931631,51.74178545770757L353.8834361062351,47.64823987597818L352.81897870903674,44.681173668090736Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_0)"> 

這兩個路徑都爲西北,東部(兩個獨立的形狀)。

下面是相關線路的查謨和克什米爾印度:

<path d="M349.0708688288608,76.60192082277737L351.06472968336755,77.21401293152348L353.21397517839284,73.89923242711829L349.8768358894954,68.99962188527996L351.03713801822863,65.88599841191811L346.62247159601435,65.58713653722538L342.6797678669645,61.687563806858705L340.9632758567483,58.30668884939667L341.3205153106512,51.78201686391614L340.04839432846063,51.111014481793575L345.84409620051866,46.20709343214726L340.8471004245848,42.639429803001754L334.505374021358,40.82757968767728L333.46705609639645,34.82016863916...24963L294.35369247273957,81.03599652134461L300.39191055943917,75.65648277687451L298.7596457375414,70.17351684501048L300.878395181624,70.74106703973978L309.4463333036843,65.00952849094406L321.2439484398911,71.4250009452865L326.4979823594866,68.71656520588343L330.6817501102758,75.89930805006198L335.88640947120206,73.01557832646392L334.9221533842447,78.0991038681132L341.2798539093941,74.2167731689795L341.8592788773095,77.91375203236635L344.60247126927095,80.35206261579755L349.0563468998405,76.64646273679408Z" stroke="none" stroke-width="0" fill="url(#_ABSTRACT_RENDERER_ID_4)"> 

這裏是阿魯納恰爾和邦路徑:

基本上,這些形狀被賦予了「有爭議的領土「 填。要完全消除填充,可以編輯SVG以刪除上面的填充路徑,也可以刪除填充的定義。刪除形狀可能是更合適的方式,但刪除定義更快更容易(因爲它們位於頂部,而且如果您稍後想要更改某些內容,則可以先找到並刪除)。下面是定義:

  • ID_0控制巴基斯坦的灰線
  • ID_1控制在印度(阿魯納恰爾和邦)的灰色線條
  • ID_3控制印度的灰線(查謨和克什米爾)

你可以使用jquery之類的搜索id,只是刪除它們。這裏是地圖的樣子開始:

Default Map

這是地圖的外觀,如果你刪除ID 1和3(保持有爭議的克什米爾部分在巴基斯坦灰色),如:

Big India

這是地圖是什麼樣子,如果你刪除ID 0,1和3(刪除所有對角線標誌有爭議的領土):

Undisputed India

要點是,你必須編輯SVG。

聲明:上面給出的如何在技術上實現期望的結果,而不承擔爭議地域或者在上面或者以其它方式的情況下的任何姿態的例子。這是技術上的幫助,不代表任何政治觀點。