如何在Google Geocharts中为国家/地区添加2-3行数据

时间：2017-03-06 10:40:16

标签： javascript jquery html google-api google-visualization

我正在使用地理图表向我的网站显示世界各地的可用商店，我需要添加可用商店的数据，并在我点击地图上的某个区域时在div中显示此数据。以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ142umlpMPn6tahte2VZwwNUfHkVZXcs">
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawMap);
 <!-- google.load('visualization', '1', {  packages: ['geochart'],callback: drawMap }); -->
function drawMap() {

var data = google.visualization.arrayToDataTable([
['Country'],
['Austria'],
['Belgium'],
['Bulgaria'],
['China'],
['Croatia'],
['Czech Republic'],
['France'],
['Germany'],
['Greek'],
['Hungary'],
['India'],
['Italy'],
['Japan'],
['Kazakhstan'],
['Luxembourg'],
['Moldova'],
['Netherlands'],
['Pakistan'],
['Poland'],
['Portugal'],
['Romania'],
['Russia'],
['Serbia'],
['Slovakia'],
['Spain'],
['Sweden'],
['Switzerland'],
['Turkey'],
['Ukraine']
]);

var options = {
backgroundColor: '#81d4fa',
defaultColor: '#FCC51D',
dataMode: 'regions',

<!-- region:'IN' -->

};

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


function myClickHandler() {

var selection = chart.getSelection();
document.getElementById('region-info').style.visibility="visible";
<!-- var message = ''; -->
for (var i = 0; i < selection.length; i++) {
  var item = selection[i];
  if (item.row != null && item.column != null) {
    //message += '{row:' + item.row + ',column:' + item.column + '}';
    document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
  } else if (item.row != null) {
   <!--  message += '{row:' + item.row + '}'; -->
   document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
  } else if (item.column != null) {
    <!-- message += '{column:' + item.column + '}'; -->
     document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
  }

  google.visualization.events.addListener(chart, 'select', myClickHandler);
  $( "#zoomin" ).click(function() {
  var zoom = $( "#map-area" ).css( "zoom",1.4 );
  });

  $( "#zoomout" ).click(function() {
  var zoom = $( "#map-area" ).css( "zoom",1 );
  });


  chart.draw(data, options);
  }

  </script>
  <style>
 .jvectormap-zoomin,.jvectormap-zoomout{
  border: 1px solid #c8d9e5;
  color: #565a5b;
  font-family: 'DINWebPro-Medium W01 Regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 42px;
text-align: center;
cursor: pointer;
width: 55px;
position: absolute;
opacity: 0.5;
left: 17px;
background: white;
height: 44px;
}
.jvectormap-zoomin{
    bottom: 55px;
}
.jvectormap-zoomout{
    bottom: 5px;
}
.geocharts-container{
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
    border: 1px solid #000;

}

</style>
</head>
<body>
<div class="geocharts-container">
<div id="map-area" style="width: 80%; height: 600px;float:left;"><div id="regions_div"></div></div>
<div id="zoomin" class="jvectormap-zoomin">+</div>
<div id="zoomout" class="jvectormap-zoomout">-</div> 
<div id="region-info"   style="float:right;width:20%;height:600px;visibility:hidden;">Text area</div>
</div>

</body>
</html>

当我点击地图上的某个区域（如俄罗斯）时，可用商店/商店地址的数据应显示在地图旁边的“region-info”div中。

1 个答案:

答案 0 :(得分：0)

您可以将商店信息添加为数据表中的其他列

然后使用数据视图隐藏图表中的其他列

var view = new google.visualization.DataView(data);
// only include first column
view.setColumns([0]);

选中后，从数据表中提取信息并显示在div

中

注意：如果我没弄错的话， GeoChart 将永远不会有多个选择
并且selection.column将始终为空

请参阅以下工作代码段... 

google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Sales'],
    ['Austria', 100],
    ['Belgium', 103],
    ['Bulgaria', 150],
    ['China', 160],
    ['Croatia', 85],
    ['Czech Republic', 40],
    ['France', 60],
    ['Germany', 80],
    ['Greek', 111],
    ['Hungary', 130],
    ['India', 90],
    ['Italy', 210],
    ['Japan', 230],
    ['Kazakhstan', 56],
    ['Luxembourg', 14],
    ['Moldova', 2],
    ['Netherlands', 91],
    ['Pakistan', 12],
    ['Poland', 63],
    ['Portugal', 14],
    ['Romania', 105],
    ['Russia', 60],
    ['Serbia', 81],
    ['Slovakia', 25],
    ['Spain', 85],
    ['Sweden', 150],
    ['Switzerland', 102],
    ['Turkey', 113],
    ['Ukraine', 40]
  ]);
  var view = new google.visualization.DataView(data);
  // only include first column
  view.setColumns([0]);

  var options = {
    backgroundColor: '#81d4fa',
    defaultColor: '#FCC51D',
    dataMode: 'regions',
  };

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

  google.visualization.events.addListener(chart, 'select', myClickHandler);
  $( "#zoomin" ).click(function() {
    var zoom = $( "#map-area" ).css( "zoom",1.4 );
  });

  $( "#zoomout" ).click(function() {
    var zoom = $( "#map-area" ).css( "zoom",1 );
  });
  chart.draw(view, options);

  function myClickHandler() {
    var selection = chart.getSelection();
    document.getElementById('region-info').style.visibility="visible";
    if (selection.length > 0) {
      var storeInfo = data.getValue(selection[0].row, 0) + ' ' + data.getColumnLabel(1) + ': ' + data.getValue(selection[0].row, 1);
      document.getElementById('region-info').innerHTML = "This is the region where we put store-info<br/>" + storeInfo;
    }
  }
}
.jvectormap-zoomin,.jvectormap-zoomout{
    border: 1px solid #c8d9e5;
    color: #565a5b;
    font-family: 'DINWebPro-Medium W01 Regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 42px;
    text-align: center;
    cursor: pointer;
    width: 55px;
    position: absolute;
    opacity: 0.5;
    left: 17px;
    background: white;
    height: 44px;
}
.jvectormap-zoomin{
    bottom: 55px;
}
.jvectormap-zoomout{
    bottom: 5px;
}
.geocharts-container{
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
    border: 1px solid #000;
}
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ142umlpMPn6tahte2VZwwNUfHkVZXcs">
</script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="geocharts-container">
<div id="map-area" style="width: 80%; height: 600px;float:left;"><div id="regions_div"></div></div>
<div id="zoomin" class="jvectormap-zoomin">+</div>
<div id="zoomout" class="jvectormap-zoomout">-</div>
<div id="region-info"   style="float:right;width:20%;height:600px;visibility:hidden;">Text area</div>
</div>

相关问题
最新问题