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

Question

我正在以 XML 格式从数据库加载标记并使用 for() 循环将其分解，但我有一个 addListener 事件“单击”，其中包含我遇到问题的 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();

但是当 data 确实包含“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("Content-type: text/html; charset=UTF-8" );。我遇到的一个小错误是我将我的设置错误地设置为 text/xml。