Google Maps V3：通过 AJAX 加载信息窗口内容
Posted
技术标签:
【中文标题】Google Maps V3：通过 AJAX 加载信息窗口内容【英文标题】：Google Maps V3: Loading infowindow content via AJAX 【发布时间】：2011-03-23 20:11:18 【问题描述】：使用 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);
);
在 infowindow.setContent 调用之前通过 ajax 获取内容很容易，但我只想在 infowindow 打开时进行 ajax 调用。有什么想法吗？
顺便说一句：我正在使用 jQuery。
正如答案中所建议的，我决定将调用移至 setContent 并打开一个单独的函数。对于那些感兴趣的解决这个问题的代码是：
function load_content(marker, id)
$.ajax(
url: 'aulas/show/' + id,
success: function(data)
infowindow.setContent(data);
infowindow.open(map, marker);
);
然后换个监听器：
google.maps.event.addListener(marker, 'click', function()
infowindow.close();
load_content(marker, a.aula.id);
);
markers.push(marker);
);
【问题讨论】：
如果我需要澄清我的回答中的任何内容，请告诉我 :) 不，那是完美的。我的想法变得混乱，我只需要在正确的方向轻轻推动。谢谢！ 没问题 :) 很高兴有帮助。 【参考方案1】：您可以在信息窗口显示后的任何时候调用 infowindow.setContent。因此，您最初可以使用微调器设置信息窗口内容，进行 AJAX 调用（从事件处理程序），然后使用适当的数据从 AJAX 响应再次调用 infowindow.setContent。
【讨论】：
【参考方案2】：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);
);
初始化地图、标记、信息窗口（作为无内容）并在标记的点击处理程序上发出 ajax 请求
【讨论】：
点击了哪个标记，如何将参数从市场发送到ajax？ 这是错误的方法，因为每次单击标记时它都会进行 ajax。尝试通过 ajax 加载最初的所有内容并渲染。 @ashishbansal ，您可以通过将一些变量设置为该范围来有条件地通过 AJAX 加载内容。【参考方案3】：infoWindow 的内容已经加载，但是如果你上传大尺寸的图片，我们必须等待第一次完全加载图片，然后设置 infowindow 的内容，然后显示该 infowindow。上述要求的解决方案是可以的，但对于图像可能不会立即加载，因此您必须检查信息窗口的内容是否已加载，然后只需显示信息窗口即可。
【讨论】：
【参考方案4】：10 年后...这通过 ajax 加载引脚，然后每个引脚都有一个通过 ajax 的信息窗口。这是一个工作示例：https://gmap.tarekadam.com，这是一个 repo https://github.com/tarekadam/gmap
当您添加您的谷歌密钥并为 pin json 提供 URL 时，此代码将起作用。
<html>
<head>
<title>gmap</title>
<script src="//maps.google.com/maps/api/js?key=YOUR-KEY-GOES-HERE"></script>
<script src="//code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
$().ready(function ()
let pinsets = [
'/one_source_of_pins.json',
'/another_source_of_pins.json'
];
var map = new google.maps.Map(document.getElementById("map"),
center: lat: -34.397, lng: 150.644,
zoom: 2.5
);
var infowindow = new google.maps.InfoWindow(
content: ""
);
for (let i = 0; i < pinsets.length; i++)
let pinset = pinsets[i];
$.ajax(
type: "GET",
url: pinset,
success: function (data)
for (let ii = 0; ii < data.length; ii++)
let datum = data[ii];
let marker = new google.maps.Marker(
position: new google.maps.LatLng(datum.lat, datum.lng),
map: map,
icon: '//thebackoffice.github.io/pins/'
.concat(datum.icon)
.concat('.png')
);
google.maps.event.addListener(marker, 'click', function (target, elem)
infowindow.open(map, marker);
infowindow.setContent('Loading...');
$.ajax(
type: "GET",
url: datum.info,
success: function (response)
infowindow.setContent(response);
.bind(infowindow)
);
.bind(datum)
.bind(marker));
ii++;
.bind(pinset)
.bind(infowindow)
);
);
</script>
</head>
<body>
<ul>
<li>Ajax calls load groups of pins.</li>
<li>onclick an ajax call fetches the info window.</li>
</ul>
<div id="map" style="width:100%; height: 750px;"></div>
</body>
</html>
【讨论】：
以上是关于Google Maps V3：通过 AJAX 加载信息窗口内容的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps v3 - 防止 API 加载 Roboto 字体
地图加载后 Google Maps API v3 不会禁用滚轮
Google Maps v3 部分加载在左上角，调整大小事件不起作用