jQuery Google Maps V3：通过 AJAX 加载信息窗口内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3381700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps V3: Loading infowindow content via AJAX
提问by mikewilliamson
What is the best way to load content into my infowindow using ajax? Right now I am getting a similar effect using iframes but I am not that that happy with it. I thought this would be straight forward but its confusing me for some reason. This is how its working right now:
使用 ajax 将内容加载到我的信息窗口的最佳方法是什么？现在我使用 iframe 得到了类似的效果，但我对它并不那么满意。我认为这会很简单，但出于某种原因让我感到困惑。这是它现在的工作方式：
var markers = [];
var infowindow = new google.maps.InfoWindow();
$.each(JSON.parse(aulas), function(i, a){
var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
var marker = new google.maps.Marker({
position : latlng,
title: a.aula.title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");
infowindow.open(map, marker);
});
markers.push(marker);
});
It would be easy to grab the content via ajax just before the infowindow.setContent call, but I want to make the ajax call only when the infowindow opens. Any thoughts?
在 infowindow.setContent 调用之前通过 ajax 获取内容很容易，但我只想在 infowindow 打开时进行 ajax 调用。有什么想法吗？
BTW: I am using jQuery.
顺便说一句：我正在使用 jQuery。
As was suggested in the answer I decided to move the calls to setContent and open to a separate function. For those interested the code that solved this was:
正如答案中所建议的，我决定将调用移动到 setContent 并打开一个单独的函数。对于那些有兴趣解决这个问题的代码是：
function load_content(marker, id){
$.ajax({
url: 'aulas/show/' + id,
success: function(data){
infowindow.setContent(data);
infowindow.open(map, marker);
}
});
}
Then change the listener:
然后更改侦听器：
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
load_content(marker, a.aula.id);
});
markers.push(marker);
});
采纳答案by RedBlueThing
You can call infowindow.setContentat any point after the info window has been shown. So you could initially set your info window content with a spinner, make the AJAX call (from the event handler) and then call infowindow.setContentagain from the AJAX response with the appropriate data.
您可以在显示信息窗口后随时调用infowindow.setContent。因此，您可以最初使用微调器设置信息窗口内容，进行 AJAX 调用（来自事件处理程序），然后使用适当的数据从 AJAX 响应中再次调用infowindow.setContent。
回答by Vishal Sharma
for (var i = 0; i < markersClient.length; i++) {
var location = new google.maps.LatLng(lats[i], longs[i]);
var marker = new google.maps.Marker({
position: location,
map: map,
lid: markersClient[i].t
});
var infowindow = new google.maps.InfoWindow({
content: ""
});
//debugger;
marker.setTitle(" - ");
markers.push(marker);
google.maps.event.addListener(marker, 'click', function (target, elem) {
infowindow.open(map, marker);
$.ajax({
success:function () {
infowindow.setContent(contentString);
}
});
intitalize map , marker , infowindow(as no content) and on marker 's click handler make ajax request
初始化地图、标记、信息窗口（作为无内容）并在标记的点击处理程序上发出 ajax 请求
回答by bikashphp
Already the content to the infoWindow is loaded but there are possibility if you are uploading images of large size then we have to wait for the first time to load the image fully and then set the content of infowindow and then display that infowindow. The solutions to the above requirement is ok but for images it might not get loaded instantly so to do that you have to check whether the content of the infowindow is loaded or not then only you have to display the info window.
信息窗口的内容已经加载，但如果您上传大尺寸图像，则有可能我们必须等待第一次完全加载图像，然后设置信息窗口的内容，然后显示该信息窗口。上述要求的解决方案是可以的，但是对于图像，它可能不会立即加载，因此您必须检查信息窗口的内容是否已加载，然后才需要显示信息窗口。
