Question

我正在使用Google Geochart API为印度政治地图实施明智的报告。我使用了以下代码：

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.或者任何方式，显示有争议的国家对争议和无争议的区域具有相同的颜色。

我们还可以拥有更多的地区＆＃34;选择＆＃34;解决方案：＆＃39;省＆＃39; ＆＃34;

请帮助!!

Answer 1

我正在寻找解决方案，并发现我们可以在域选项中将参数作为“IN”传递，这会将克什米尔视为印度国家，而不是列为有争议的，请检查以下链接中的所有选项

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

Answer 2

不是一个完整的答案，我承认我对google.maps的这方面知之甚少，但它说here：

Maps API中地图类型的内部工作方式是高级的话题。大多数开发人员可以简单地使用标注的基本地图类下面。但是，您也可以使用自定义定义自己的地图图块使用映射类型或修改现有地图类型的表示风格的地图。提供自定义地图类型时，您需要了解如何修改地图的地图类型注册表。

通过一些努力，这应该提供一种机制，通过该机制，您可以为争议地区提供自己的重新着色地图图块。

Answer 3

该地图的基础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。

免责声明：上述内容是作为如何在技术上达到预期结果而不在上述情况或其他情况下对争议地区采取任何立场的示例。这是技术帮助，并不表示任何政治观点。

Google Geochart：争议区域的颜色代码不正确

3 个答案: