1

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>
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 に答える