谷歌地图API第3版，使用AJAX通过setContent负载信息窗口的内容 [英] Google Map API v3, load infoWindow content via setContent using AJAX

问题描述

我是从一个XML格式的数据库加载标记和使用for（）循环打破它，但我有一个的addListener事件点击包含一个AJAX调用我有麻烦。我想填充我的信息窗口的内容与数据的Ajax调用扯了下来。

I'm loading markers from a database in XML format and breaking it out using a for() loop but I have an addListener event 'click' that contains an AJAX call I'm having trouble with. I'm trying to populate the content of my infoWindow with the data pulled down in the ajax call.

下面是我的code中的for（）循环内的复制：

Here is a copy of my code inside the for() loop:

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));

我试图改变这样的：

I tried changing this:

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

只是这样的：

to just this:

infoWindow = new google.maps.InfoWindow();

但信息窗口现在出来了空白的数据确实包含XYZZY雅呀呀。任何人都可以看到我在做什么错在这里？

But the info windows are just coming up blank now when data does contain 'xyzzy ya ya ya'. Can anyone see what I'm doing wrong here?

问候， 文斯

推荐答案

终于得到了这个工作。这是什么code样子了。

Finally got this working. Here is what the code looks like now.

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（）函数调用。

And the infoWindowAjax() function that it calls.

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

我不得不Ajax调用移动到它自己的功能，并使用一个回调来获取信息回到那里我可以用它，一旦它完成了它的历程。

I had to move the ajax call to it's own function and use a callback to get the information back to where I could use it once it had run it's course.

PS：我使用jQuery 2.1.1

PS: I was using jQuery v2.1.1.

PPS：如果返回的数据仅仅是简单的原始文本，即使是UTF-8的内容，确保PHP模板头设置例如标题（内容类型：text / html的;字符集= UTF-8 ）; 。一个小错误我遇到的是，我有我错误地设置为文字/ XML

PPS: If the data returned is just simple raw text, even UTF-8 content, make sure the PHP template header is set like header("Content-type: text/html; charset=UTF-8");. One little bug I ran into was that I had mine set incorrectly to text/xml.

这篇关于谷歌地图API第3版，使用AJAX通过setContent负载信息窗口的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！