jquery - Google Map API v3，使用 AJAX 通过 setContent 加载 infoWindow 内容

Question

我正在从 XML 格式的数据库加载标记，并使用 for() 循环将其分解，但我有一个 addListener 事件“click”，其中包含我遇到问题的 AJAX 调用。我正在尝试使用 ajax 调用中下拉的数据填充 infoWindow 的内容。

这是我在 for() 循环内的代码的副本:

var mkID = mk[i].getAttribute("id");

marker = new google.maps.Marker({
    position: point,
    map: map,
    icon: "/img/icon.png",
    title: "Click to Show"
});

infoWindow = new google.maps.InfoWindow({
    content: "<i class='fa fa-spinner fa-spin fa-lg' style='color: #FFA46B;' title='Loading...'></i> Loading..."
});

markerArray.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, infoWindow, mkID) {
    return function() {
        if(infoWindow) {
            infoWindow.close();
        }
        infoWindow.open(map, marker);
        $.ajax({
            url: '/map-info-ajax.html?id=' + mkID,
            success: function(data) {
                infoWindow.setContent(data);
            }
        });
    };
})(marker, infoWindow, mkID));

我尝试改变这个:

infoWindow = new google.maps.InfoWindow({
    content: "<i class='fa fa-spinner fa-spin fa-lg' style='color: #FFA46B;' title='Loading...'></i> Loading..."
});

就是这样:

infoWindow = new google.maps.InfoWindow();

但是当数据确实包含“xyzzy ya ya ya”时，信息窗口现在显示为空白。谁能看到我在这里做错了什么吗？

问候，文斯

Answer 1

终于成功了。下面是代码现在的样子。

var mkID = mk[i].getAttribute("id");

marker = new google.maps.Marker({
    position: point,
    map: map,
    icon: "/img/icon.png",
    title: "Click to Show"
});

infoWindow = new google.maps.InfoWindow({
    content: "<i class='fa fa-spinner fa-spin fa-lg' style='color: #FFA46B;' title='Loading...'></i> Loading..."
});

markerArray.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, infoWindow, mkID) {
    return function() {
        if(infoWindow) {
            infoWindow.close();
        }
        infoWindow.open(map, marker);
        infoWindowAjax(mkID, function(data) {
            infoWindow.setContent(data);
        });
    };
})(marker, infoWindow, mkID));

以及它调用的 infoWindowAjax() 函数。

function infoWindowAjax(mkID, callback) {
    return $.ajax({
        url: '/map-info-ajax.html?id=' + mkID
    })
    .done(callback)
    .fail(function(jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    });
}

我必须将 ajax 调用移至它自己的函数，并使用回调将信息返回到我可以在运行过程中使用它的位置。

PS:我使用的是 jQuery v2.1.1。

PPS:如果返回的数据只是简单的原始文本，甚至是 UTF-8 内容，请确保 PHP 模板 header 设置为 header("Content-type: text/html; charset=UTF-8")；。我遇到的一个小错误是我的设置错误为 text/xml。