带有Google GeoChart文字的标记 [英] Markers with text on a Google GeoChart

问题描述

我正在尝试制作一个应该如下所示的Google GeoChart：

但是，问题是，我甚至不确定是否有可能混淆标记和文本。

现在我的代码如下：

  google.charts .load（'current'，{'packages'：['geochart']}）; 
 google.charts.setOnLoadCallback（drawRegionsMap）; 
 
函数drawRegionsMap（）{
 
 var data = google.visualization.arrayToDataTable（[
 ['Region'，'Gagnants']，
 [ '阿尔萨斯'，6]，['阿基坦'，1]，['奥弗涅'，5]，['巴斯诺曼底'，2]，['勃艮第'，1]，['布列塔尼'，7] ''Centre'，1]，['Champagne-Ardenne'，0]，['Corse'，9]，['Franche-Comté'，1]，['Haute-Normandie'，0]，['Île-de法国'，7]，['朗格多克 - 鲁西永'，0]，['利木赞'，7]，['洛林'，1]，['南部 - 比利牛斯'，2] -Calais'，53]，['Pays de la Loire'，7]，['Picardie'，0]，['Poitou-Charentes'，1]，['Provence-Alpes-Côted''Azur' 10]，['罗纳 - 阿尔卑斯'，21] 
]）; 
 
 var options = {region：FR，
 resolution：provinces，
 colorAxis：{colors：['＃FFF9F7'，'＃FC4C13']} 
}; 
 
 var chart = new google.visualization.GeoChart（document.getElementById（'regions_div'））; 
 
 chart.draw（data，options）; 
} 
  

这给了我：

这与我想要的相差甚远。我想放弃谷歌的api，并创建一个大的div来保存原始地图作为背景，并且创建标记作为文本块，将它们放置在相应区域的正上方，并将红色标记设置为背景。但它会是魔鬼自己的工作，让它在每个尺寸的屏幕上看起来都不错......

任何想法？谢谢 ！ ：） 您可以使用 Google Maps JavaScript API ，以添加自定义标记或带标签的标记。请注意，后者不是Google Maps API的一部分。

但所有这些都可能是矫枉过正的，我宁愿忍受悬停时数字可见的事实每个区域。

如果您还想用不同阴影（取决于数字）突出显示每个区域，则需要绘制多边形，Google不会提供其几何图形以任何方式，TMK，所以你需要从其他地方获得这些几何。

I'm trying to make a Google GeoChart that should look like this :

But, problem is, I'm not even sure it is possible to mix up markers and text in them.

Right now my code is the following :

google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
        ['Region', 'Gagnants'],
        ['Alsace', 6], ['Aquitaine', 1], ['Auvergne', 5], ['Basse-Normandie', 2], ['Bourgogne', 1], ['Bretagne', 7], ['Centre', 1], ['Champagne-Ardenne', 0], ['Corse', 9], ['Franche-Comté', 1], ['Haute-Normandie', 0], ['Île-de-France', 7], ['Languedoc-Roussillon', 0], ['Limousin', 7], ['Lorraine', 1], ['Midi-Pyrénées', 2], ['Nord-Pas-de-Calais', 53], ['Pays de la Loire', 7], ['Picardie', 0], ['Poitou-Charentes', 1], ['Provence-Alpes-Côte d\'Azur', 10], ['Rhône-Alpes', 21]
    ]);

    var options = {region: "FR",
        resolution: "provinces",
        colorAxis: {colors: ['#FFF9F7', '#FC4C13']}
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
}

Which gives me that :

And that's pretty far from what I want. I thought about giving up on google's api and creating a big div holding the raw map as background, and create the markers as text block to positition them right above the corresponding region and set the red marker as background. But it will be the devil's own work to make it look good on every sizes of screens...

Any ideas? Thanks ! :)

解决方案

You could use the Google Maps JavaScript API to add custom markers or markers with labels. Note that the latter is not part of the Google Maps API.

But all of this is probably overkill, I'd rather live with the fact that numbers are visible when hovering each region.

If you also want to highlight each region in a different shade (depending on numbers) you'd need to draw polygons and Google doesn't provide their geometry in any way TMK, so you'd need to get those geometries from somewhere else.

这篇关于带有Google GeoChart文字的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！