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

Question

我正在尝试获取南非的地图，但它应该只显示南非，而不是谷歌图表中显示的其他国家和海洋。

有可能吗？我试图找到一个解决方案但是失败了。

这需要显示南非的谷歌图表代码：

<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 - 选项（它与哪种颜色无关，但它在地图中应该是唯一的，所以要采用一些不寻常的颜色）。

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

简单的CSS解决方案是：

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

演示：

＆＃13;

＆＃13;

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);
}

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

与评论相关的演示：

＆＃13;

＆＃13;

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);
}

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;