將活動監聽程序添加到使用標記的谷歌地圖上

Question

我現在正在用google geochart掙扎一下。我正在嘗試將一個事件偵聽器添加到geochart中，該geochart使用標記來顯示世界國家，當用戶單擊標記時，它會加載特定於國家/地區的數據。除了事件偵聽器，我的代碼運行良好。現在，我知道當我使用chartwrapper對象時，必須添加兩個事件偵聽器，一個用於儀表板，另一個用於儀表板事件偵聽器加載後的圖表。當我使用區域代替標記時，我設法讓我的代碼正常工作，但對於標記我無法使其工作。它通常應該是相同的事件，基本上是'選擇'，但我無法讓它工作。我已經發布了我的整個代碼以獲取全局圖片，但您應該只關注事件偵聽器和關聯的tableSelectHandler（）函數。到目前爲止，我已經嘗試刪除函數中的所有代碼，並僅顯示一般警報，但即使這樣也不行。請幫助 ！非常感謝

var script_url = [ 
    '/SymphonyAdminPanel/php/SQLSRV/finalshareByCountry.php', 
    '/SymphonyAdminPanel/php/SQLSRV/countryData.php', 
    '/SymphonyAdminPanel/php/salesdata.php'  
]; 

var pn_1_data = null; //pn_1 datatable 
var pn_1 = null; // pn_1 div 
var pn_1_filter = null; // pn_1 filter 
var pn_1_ch = null; // pn_1 chart 

function pn_1_draw() { 
    // Create a dashboard. 
    pn_1 = new google.visualization.Dashboard(document.getElementById('pn_1')); 

    // Create a filter for our datatable 
    pn_1_filter = new google.visualization.ControlWrapper({ 
    'controlType': 'NumberRangeFilter', 
    'containerId': 'pn_1_filter', 
    'options': { 
    'filterColumnIndex': 1, //Use filterColumIndex here & not filtercolumnIndex  
    } 
    }); 

    // Chart wrapper object 
    pn_1_ch = new google.visualization.ChartWrapper({ 
     'chartType' : 'GeoMap', 
     'containerId' : 'pn_1_ch', 
     'options': { 
     'dataMode' : 'markers', 
     'region' : 'world', 
     'fontName': 'Arimo', 
     'width': 900, 
     'height' : 500  
     } 

    }); 

    //We bind the elements to our dashboard 
    pn_1.bind(pn_1_filter, pn_1_ch); 

    // Load Json data from server, create datatable & draw charts 
    $.getJSON(script_url[0], function(jresults){ 

    //We use the datatable declared earlier and assign it our $.getJson object  
    pn_1_data = new google.visualization.DataTable(jresults.data); 

    //We draw the whole dashboard object and its bound elements  
    pn_1.draw(pn_1_data); 

    //We add an event listener to our dashboard which adds an event listener to the bound chart 
    google.visualization.events.addListener(pn_1, 'ready', function(){ 

     google.visualization.events.addListener(pn_1_ch,'select', tableSelectHandler); 

    }); 


    }); 

}; 

function tableSelectHandler(){ 
/*var selectedItem = pn_1_ch.getChart().getSelection()[0]; 
    var country = pn_1_data.getValue(selectedItem.row, 2); 

    //Set the geochart region to the country selected 
    pn_1_ch.setOption('region',country); 

    //Load new JSON data 
    var url_updated = '/SymphonyAdminPanel/php/SQLSRV/countryData.php?&country='+country; 

    $.getJSON(url_updated, function(jresults){  

    pn_1_data = new google.visualization.DataTable(jresults.data); 

    pn_1.draw(pn_1_data);  

    }); */ 
    alert('Its working');  

}; 

Answer 1

我認爲這是那裏的問題來自：

 //We add an event listener to our dashboard which adds an event listener to the bound chart 
google.visualization.events.addListener(pn_1, 'ready', function(){ 

    google.visualization.events.addListener(pn_1_ch,'select', tableSelectHandler); 

}); 

你添加事件listenner是等待，直到pn_1是爲了添加另一個事件偵聽器，pn_1_ch準備。我認爲這可能會干擾整個代碼。也許你應該嘗試添加事件分開。 另外，儘量不要在addListener之外定義函數，以查看函數是否正常工作。試試這個：

google.visualization.events.addListener(pn_1, 'ready', function(){ /*...*/ }); 
google.visualization.events.addListener(pn_1_ch,'select', function(){ 
    alert("this is working"); 
}); 

看來，寫我的代碼總是對我更好。