在 geochart 上选择标记答案

【问题标题】：selecting marker on geochart在 geochart 上选择标记
【发布时间】：2013-01-02 19:12:30
【问题描述】：

我在 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>

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 google-visualization

【解决方案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);
    }
});

}

【讨论】：

谢谢，这就是我想要做的（目前）。与其使用警报框，不如将其发送到数据库中查找某些内容，然后路由到新页面。我使用了一个警告框，因为它是一种检查是否选择了值的简单方法。
嗯，它似乎在 jsFiddle 中完美运行，但是，即使我只使用此代码设置一个新页面，它也不会运行。页面上唯一出现的是“â€‹”。我将更新上面的代码，以准确反映我在这个新页面上的内容。
根据我的经验，JSFiddle 可以产生那个 â€‹ 工件。我发布了我在这里使用的完整 HTML pastebin.com/kURHnvMU 编辑：对不起，请给我一些时间让我也看到更新的代码。
抱歉没有仔细阅读。我清理了工件，这是更新问题中的新粘贴：pastebin.com/2rpGXHYs 它应该可以工作。我没有想到这个工件会破坏页面，它确实很少随机发生
我希望您能询问如何检测 â€‹，以防您不得不再次从 JSFiddle 复制。现在我想调查一下。就我而言，我使用 emacs 编辑器，它在尝试保存文件时会抱怨，它不是有效的 unicode 字符。总之，晚安！