在Google Maps API中显示区域

时间:2014-12-03 04:29:20

标签: google-maps

所以,我想得到一个'楠榜'区域,但它显示为一个区域,而不是标记。我的代码使用的是geochart API。这是我的代码:

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
  ['Province'],
  ['Lampung'],
  ['Banten'],

  ]);

var options = {
  region: '035', //South-East Asia
  displayMode: 'regions',
  colorAxis: {colors: ['#00853f', 'blue', '#e31b23']},
};

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

但问题是,结果还没有显示任何地区。它只是一个没有任何displayMode的地图。下一个问题是,如果我将其添加到'选项':

resolution: 'provinces'

结果只是没有地图的空白网页。这有什么不对?

1 个答案:

答案 0 :(得分:2)

我认为您所在的地区'035'太大,您应该将您的地区缩放到较小的区域,在您的情况下,您应该使用options['region'] = 'ID';

您可以尝试使用以下代码,它应该在地图中显示2个橙色区域:

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

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
         ['Province'],
         ['Lampung'],
         ['Banten']
      ]);

      var options = {};
      options['region'] = 'ID';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'regions';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>
</html>