Google GeoChart上带有文字的标记

Question

我试图创建一个看起来像这样的Google GeoChart：

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

现在我的代码如下：

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);
}

这给了我：

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

有什么想法吗？谢谢 ！ ：）

Answer 1

您可以使用Google Maps JavaScript API添加custom markers或markers with labels。请注意，后者不是Google Maps API的一部分。

但所有这些都可能有点过头了，我宁愿接受这样一个事实，即在悬停每个区域时数字是可见的。

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