javascript - 如何仅获取特定国家/地区的地理谷歌图表

Question

我正在尝试获取南非 map ，但它应该只显示南非，而不会在 Google 图表中显示南非周围的其他国家和海洋。

这可能吗？我已经在网上搜索过，试图找到解决这个问题的方法，但失败了。

这是显示南非所需的谷歌图表代码:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1', { 'packages': ['geochart'] });
    google.setOnLoadCallback(drawMarkersMap);

    function drawMarkersMap() {
        var data = google.visualization.arrayToDataTable([
          ['Province', 'Successful Deliveries'],
          @Html.Raw(rows6)]);

        var options = {
            region: 'ZA',
            displayMode: 'auto',
            //colorAxis: { colors: ['#cccccc', '#C01E24'] },
            resolution: 'provinces',
            height: '390'

        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
</script>

这是它的显示方式:

我如何才能像这样只显示南非，而不显示海洋和周边国家(例如)

如果有人需要其他信息，请告诉我，我会将其添加到问题中。

Answer 1

可能的做法(要求数据表包含特定国家所有省份的数据，没有其他国家的数据):

定义datalessRegionColor选项(选择哪种颜色无关紧要，但它在 map 中应该是唯一的，所以取一些不寻常的颜色)。

API 将使用此颜色为未使用的区域设置填充颜色属性。你用这种颜色的目的是什么？当你知道一个元素的属性时，你就可以为这个元素定义一个选择器。

简单的 CSS 解决方案是:

path[fill='#123456']{display:none !important;}

演示:

google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['Province', 'Successful Deliveries'],
    ['ZA-EC', null],
    ['ZA-FS', null],
    ['ZA-GT', 500],
    ['ZA-NL', null],
    ['ZA-LP', null],
    ['ZA-MP', null],
    ['ZA-NC', null],
    ['ZA-NW', null],
    ['ZA-WC', 100]
  ]);

  var options = {
    datalessRegionColor: '#123456',
    region: 'ZA',
    resolution: 'provinces',
    defaultColor: '#ffffff',
    keepAspectRatio: true
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

html,
body,
#regions_div {
  margin: 0;
  padding: 0;
  height: 100%;
}
#regions_div {
  margin: 0;
  padding: 0;
  height: 90%;
  width: 90%;
}
path[fill='#123456'] {
  display: none !important
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" "></div>

评论相关Demo:

google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

  var data = google.visualization.arrayToDataTable([
    ['Province', 'Successful Deliveries'],
    ['ZA-EC', null],
    ['ZA-FS', null],
    ['ZA-GT', 500],
    ['ZA-NL', null],
    ['ZA-LP', null],
    ['ZA-MP', null],
    ['ZA-NC', null],
    ['ZA-NW', null],
    ['ZA-WC', 100]
  ]);

  var options = {
    datalessRegionColor: '#123456',
    region: 'ZA',
    resolution: 'provinces',
    defaultColor: '#ffffff',
    keepAspectRatio: true,
    tooltip:{trigger:'selection'},
    width:1000,height:600
  };

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

#regions_div{
  position:relative;
  width:310px;
  height:270px;
  overflow:hidden;
  border:1px solid silver;
}
#regions_div svg{
  position:absolute;
  left:-300px;
  top:-20px;
}
path[fill='#123456'] {
  display: none !important
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['geochart']}]}"></script>
<div id="regions_div" "></div>