1

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

我看到两种方法来解决这个问题，但我不确定从哪里开始：

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

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

4

2 回答 2

3

您可以使用Google 的数据可视化 Geocharts相当轻松地做到这一点。只需初始化您的 Geochart。您需要传入 aDataTable以绘制图表，因此只需传入一个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
    });

演示

于 2013-08-28T20:45:47.683 回答
0

不确定是否有人仍在寻找如何执行此操作，但我在尝试从表格中完成多个国家/地区选择时发现了这个线程。基本上，有几个关于如何设置其他所有内容的现有方法，但我的代码最终不同的地方在于表选择处理程序。我为表的每一行设置了一个 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!');
    }

});
于 2015-03-25T17:03:44.020 回答