javascript - $.getJSON、google.maps.infowindow 和内容字符串

Question

该代码应该添加一个单击事件，其中一个信息窗口在带有来自 PHP 页面的数据的标记上打开，并且它“工作”，除了第一个信息窗口打开空白（只是在 h1 中说新闻），然后我打开的每个其他信息窗口都包含最后一个标记的东西。谁能告诉我如何解决它？

//broken part
marker.addListener('click', function() {
    $.getJSON('articles.php/GET?geo='+ marker.title)
    .done(function(data, textStatus, jqXHR) {   
        $.each(data, function() {
            contentString=contentString + '<li><a href=' + data[counter].link + '>' +data[counter].title + '</a></li>' ;
            counter++;
        });         
    });

    contentString=contentString + '</ul></div>' ;
    var infowindow= new google.maps.InfoWindow({
        content: contentString  
    });

    infowindow.open(map, marker);
    counter=0 ;
    contentString='<div align="center"><h1>news</h1><br></div><div align="left" colour="blue"><ul>';
});

Answer 1

$.getJSON 是异步的，您需要在其回调函数内使用数据，何时/何地可用（在.done函数内）。

marker.addListener('click', function() {
    $.getJSON('articles.php/GET?geo='+ marker.title)
    .done(function(data, textStatus, jqXHR) {   
        $.each(data, function() {
            contentString=contentString + '<li><a href=' + data[counter].link + '>' +data[counter].title + '</a></li>' ;
            counter++;
        });         
        contentString=contentString + '</ul></div>' ;
        var infowindow= new google.maps.InfoWindow({
            content: contentString  
        });

        infowindow.open(map, marker);
        counter=0 ;
        contentString='<div align="center"><h1>news</h1><br></div><div align="left" colour="blue"><ul>';

    });
});