Javascript onClick Funktion für Googles GeoChart

Question

Ich versuche, eine Karte mit Googles GeoChart anzuzeigen https://developers.google.com/chart/interactive/docs/gallery/geochart

Die Karte die Daten anzeigt und bestimmten Ländern in Ordnung, aber ich kann nicht herausfinden, wie zu jedem bestimmten Land einen Link onClick zuweisen oder erhalten Sie eine onClick-Funktion für die Länder.

Dieser Link beschreibt die RegionClick 'und' Select 'der Ereignisse, die wie ein Teil von dem, was ich brauche, klingt, obwohl ich nicht sicher bin, wie diese meine Link-Funktion auslösen wird ... Ich bin neu in Javascript. Mit ‚die Option‘ scheint es eine Methode sein, um ‚GetSelected‘

<scripts type='text/javascript'> 
    google.load('visualization', '1', {'packages': ['geomap']}); 
    google.setOnLoadCallback(drawMap); 
    function drawMap() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Projects'], 
     ['Russia', 3], 
     ['France', 2], 
     ['Spain', 4] 
    ]); 

    var options = {}; 
    options['dataMode'] = 'regions'; 
    options['width'] = '834px'; 
    options['height'] = '521px'; 

    var container = document.getElementById('map_canvas'); 
    var chart = new google.visualization.GeoChart(container); 
    chart.draw(data, options); 
    }; 


    function myClickHandler(){ 
    var selection = chart.getSelection(); 

    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 + '}'; 
     } else if (item.row != null) { 
     message += '{row:' + item.row + '}'; 
     } else if (item.column != null) { 
     message += '{column:' + item.column + '}'; 
     } 
    } 
    if (message == '') { 
     message = 'nothing'; 
    } 
    alert('You selected ' + message); 
    } 
</script> 

Jede Hilfe oder Richtung geschätzt Dank

Answer 1

Es gibt ein paar Dinge, die Sie tun müssen. Erstens, da Ihre Funktion myClickHandler das Objekt chart referenziert, muss es sich in demselben Bereich wie chart befinden, also müssen Sie es in drawMap verschieben. Zweitens müssen Sie für das Diagramm, das die myClickHandler Funktion verwendet, einen 'click' Ereignishandler erstellen. Hier ist, was der Code sollte wie folgt aussehen:

function drawMap() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Projects'], 
     ['Russia', 3], 
     ['France', 2], 
     ['Spain', 4] 
    ]); 

    var options = { 
     dataMode: 'regions', 
     width: 834, 
     height: 521 
    }; 

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

    function myClickHandler(){ 
     var selection = chart.getSelection(); 
     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 + '}'; 
      } else if (item.row != null) { 
       message += '{row:' + item.row + '}'; 
      } else if (item.column != null) { 
       message += '{column:' + item.column + '}'; 
      } 
     } 
     if (message == '') { 
      message = 'nothing'; 
     } 
     alert('You selected ' + message); 
    } 

    google.visualization.events.addListener(chart, 'select', myClickHandler); 

    chart.draw(data, options); 
} 
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap}); 

jsfiddle: http://jsfiddle.net/asgallant/6dP28/