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

Question

我正在以 XML 格式从数据库加载标记并使用 for() 循环将其分解，但我有一个包含 AJAX 调用的 addListener 事件 'click'我遇到麻烦了。我正在尝试使用 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' 时，信息 windows 现在只是空白。谁能看出我在这里做错了什么？

此致，文斯

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.

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

Google Map API v3, load infoWindow content via setContent using AJAX

ajax

jquery

infowindow

google-maps-api-3