Question

我需要提供一个Web界面，用户可以在地图上选择国家/地区。这相当于复选框或多选，只是以可视方式呈现。

我认为有两种方法可以解决这个问题，我不知道从哪里开始：

构建表单元素，隐藏它们并将它们绑定到地图
或从交互式地图开始，并将点击的国家/地区存储在文本字段中

是否有任何示例或插件显示如何实现此目的？具体要求是能够选择多个国家/地区，而不仅仅是一个。

Answer 1

您可以使用Google's Data Visualization Geocharts轻松完成此操作。只需初始化您的Geochart。您需要为图表传递DataTable以进行绘制，因此只需传入一个没有任何行数据的空DataTable。

    var data = google.visualization.arrayToDataTable([
        ['Countries']
    ]);

    var options = {
        //set any options you want to the chart
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);

然后使用'regionClick'事件侦听区域上的点击事件，您可以将其附加到列表或处理所需的区域数据。但这应该通过图形地图为国家选择提供一个良好的起点。

    google.visualization.events.addListener(chart, 'regionClick', function(e) {
        //e.region gives you country code of selected country
    });

Demo

Answer 2

不确定是否有人仍在寻找如何执行此操作，但我在尝试从表中完成多个国家/地区选择时找到了此线程。基本上，有几个关于如何设置其他内容的现有小提琴，但我的代码最终不同的地方在表选择处理程序中。我为表的每一行设置了一个switch语句，并为要使用的图表创建了第二个（data2）变量：

       var selection = table.getSelection();
        switch(selection[0].row) {
    case 0:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['Argentina'],['Austraila'], ['Canada'], ['China'], ['India'], ['Japan'], ['New Zealand'], ['United Kingdom'], ['South Korea'], ['Saudi Arabia'], ['Singapore'], ['Taiwan'], ['United States']]);
        Geochart.draw(data2, options);
        break;
    case 1:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['United States'], ['France'], ['Germany']]);
        Geochart.draw(data2, options);
        break;
    case 2:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['Sweden'], ['Russia'], ['Brazil']]);
        Geochart.draw(data2, options);
        break;
    case 3:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['Mexico'], ['Chile'], ['Iceland']]);
        Geochart.draw(data2, options);
        break;
    case 4:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['Portugal'], ['Yemen'], ['Egypt']]);
        Geochart.draw(data2, options);
        break;
    case 5:
        var data2 = google.visualization.arrayToDataTable([['Countries'], ['Finland'], ['Belgium'], ['Ireland']]);
        Geochart.draw(data2, options);
        break;  
    default:
        alert('Row selection error!');
    }

});

在地图上选择多个国家/地区

2 个答案: