博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

对谷歌geoChart进行测试

Posted on 2011-07-05 15:23  yangjiann  阅读(645)  评论(0)    收藏  举报

对谷歌geoChart的示例进行了下修改，使它能显示到省一级：

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

    function drawRegionsMap() {
      var data = new google.visualization.DataTable();
      data.addRows(6);
      data.addColumn('string', 'Provice');
      data.addColumn('number', 'Popularity');
      data.setValue(0, 0, 'Qinhai');
      data.setValue(0, 1, 200);
      data.setValue(1, 0, 'Shanxi');
      data.setValue(1, 1, 1000);
      data.setValue(2, 0, 'Guangxi');
      data.setValue(2, 1, 400);
      data.setValue(3, 0, 'CN-14');
      data.setValue(3, 1, 500);
      data.setValue(4, 0, 'CN-15');
      data.setValue(4, 1, 600);
      data.setValue(5, 0, 'CN-65');
      data.setValue(5, 1, 700);

      var options = { 'region': 'CN','resolution':'provinces','width':'1000','height':'600'};

      var container = document.getElementById('map_canvas');
      var geochart = new google.visualization.GeoChart(container);
      geochart.draw(data, options);
  };
  </script>
</head>

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

</html>

主要是options中，将region设置为CN，支持的国家简码包括：http://en.wikipedia.org/wiki/ISO_3166-1。省级代码包括：http://en.wikipedia.org/wiki/ISO_3166-2:CN，在设置data中的省代码时，使用CN-XX格式的代码有效（XX代码为身份证前两位省代码），使用省的名称有的有效（如Ningxia,Guangxi,Guizhou等），有的无效（如Shanxi,Sichuan等）。