1

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

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

edit-this 在 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>
4

1 回答 1

4

不确定我是否完全理解您想要什么，尽管我得到了以下演示来显示城市并且可以点击。响应是带有城市名称的警报框。

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

}
于 2012-06-08T23:00:00.187 回答