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

这给了我:

这与我想要的相去甚远。我想放弃谷歌的 api 并创建一个大的 div 将原始 map 作为背景，并将标记创建为文本 block 以将它们定位在相应区域的正上方并将红色标记设置为背景。但要让它在各种尺寸的屏幕上看起来都不错，那将是魔鬼自己的工作......

有什么想法吗？谢谢 ! :)

Answer 1

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

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

如果您还想以不同的阴影(取决于数字)突出显示每个区域，您需要绘制多边形，而 Google 不会以任何方式提供它们的几何图形 TMK，因此您需要从中获取这些几何图形别处。