Question

我在Geochart上绘制了一些城市，我试图让用户点击标记来选择他们的位置。目前，我只是使用警报框进行测试。

现在我只列出城市名称，没有附加人口，大小，面积或数字。

编辑 - 这在jsFiddle中运行，但我不能让它在它自己的页面上运行。有没有人看到我不喜欢的东西？

<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(drawMarkersMap);

function drawMarkersMap() {

   var newInfo = google.visualization.arrayToDataTable([
     ['City'],
     ['Rome'],
     ['Truth or Consequences'],
     ['Ann Arbor'],
     ['Chico'],
     ['Los Angeles'],
     ['Seattle'],
     ['Chicago'],
     ['Lubbock']
     ]);

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

chart.draw(newInfo, {
    width: 667,
    height: 416,
    datalessRegionColor: '#3FADD1',
    tooltip: {
        textStyle: {
            color: 'blue'
        },
        showColorCode: false
    },
    displayMode: 'markers',
    region: 'US',
    resolution: 'provinces'
   });

google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();

    // if same city is clicked twice in a row
    // it is "unselected", and selection = []
    if(typeof selection[0] !== "undefined") {
      var value = newInfo.getValue(selection[0].row, 0);
      alert('City is: ' + value);
    }
});

};
</script>
</head>
<body>
  <div id="geoChart" style="width: 250px; height: 400px;"></div>
</body>
</html>

Answer 1

我不确定我到底想要什么，但我得到了以下演示来显示城市并且可以点击。响应是带有城市名称的警告框。

http://jsfiddle.net/Mep7R/4/

以下是相关代码：

function drawMarkersMap() {

var newInfo = google.visualization.arrayToDataTable([
    ['City'],
    ['Rome'],
    ['Truth or Consequences'],
    ['Ann Arbor'],
    ['Chico'],
    ['Los Angeles'],
    ['Seattle'],
    ['Chicago'],
    ['Lubbock']
    ]);

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

chart.draw(newInfo, {
    width: 667,
    height: 416,
    datalessRegionColor: '#3FADD1',
    tooltip: {
        textStyle: {
            color: 'blue'
        },
        showColorCode: false
    },
    displayMode: 'markers',
    region: 'US',
    resolution: 'provinces'
});

google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();

    // if same city is clicked twice in a row
    // it is "unselected", and selection = []
    if(typeof selection[0] !== "undefined") {
      var value = newInfo.getValue(selection[0].row, 0);
      alert('City is: ' + value);
    }
});

}

在geochart上选择标记

1 个答案: