javascript - 在 map 上选择多个国家

Question

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

我看到有两种方法可以解决这个问题，但我不确定从哪里开始:

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

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

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' 事件监听区域上的点击事件，您可以将其附加到列表中或根据需要处理所选区域数据。但这应该为通过图形 map 选择国家/地区提供一个良好的起点。

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

Demo