如何用城市名称显示标记 - Google Geochart

时间:2018-02-08 10:58:56

标签: javascript google-maps google-visualization

如何使用标记显示名称,目前只有一个选项可在“标记”或“文本”之间进行选择。如果我选择“文本”,则单击文本时没有单击选项。是否有可能在地图上同时存在?如果没有,那么我们可以在文本上进行点击事件吗?

var dataCities = google.visualization.arrayToDataTable([
            ['City', ''],
            ['Lahore', 1],
            ['Karachi', 1],
            ['Islamabad', 1],
            ["Gilgit", 1]
        ]);

        var options = {
            region: 'PK',
            displayMode: 'text',
            width: 834,
            height: 521,
            backgroundColor: '#fff',
            datalessRegionColor: '#9bd5e1',
            defaultColor: '#fff',
            legend: 'none',
            showTooltip: true,
            showInfoWindow: true,
            sizeAxis: {
                minValue: 0,
                maxValue: 5
            },

            colorAxis: {
                colors: ['#739FA8', '#739FA8', '#739FA8', '#739FA8', '#739FA8']
            }

        };

function myClickHandler() {
            var city = '';
            var selection = chart.getSelection();
            if (selection.length > 0) {
                city = dataCities.og[selection[0].row].c[0].v;
                //alert(data.getValue(selection[0].row, 0));
                document.getElementById('location').innerHTML = '';
                document.getElementById('location').innerHTML = countryCity + ' , ' + city;
            }
        }
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        google.visualization.events.addListener(chart, 'select', myClickHandler);
        chart.draw(dataCities, options);

这是小提琴:jsfiddle

1 个答案:

答案 0 :(得分:0)

您可以尝试将geochart设置为在Geochart中包含省份。

    var options = {
      region: 'IT',
      resolution: 'provinces',
      displayMode: 'text',
      colorAxis: {colors: ['green', 'blue']},
      sizeAxis: {minSize: 12, maxSize:20},
      enableRegionInteractivity: true   
    };

然后,您只需添加regionClick事件处理程序即可将其发送到myClickHandler()方法。

  google.visualization.events.addListener(chart, 'regionClick', myClickHandler); 
  chart.draw(data, options);

以下是我对example的更新版本以及对代码的修改。